Possible to make a Service Portal header vertical (sidebar) instead of horizontal?

Chris Sanford1 · ‎04-25-2018

I am trying to create a vertical header menu on the left side of the screen in Service Portal, similar to the left menu on the HI Portal. But I haven't had much luck. If I set the height to 100% and give a fixed width with CSS, the menu will be vertical, but all of the content will fall underneath it, and you'd have to scroll way down to see anything other than the menu. Is there a way to configure a menu such that the rest of the page content will be side by side with the menu, rather than underneath it?

benjamin_alldri · ‎05-02-2018

Thanks. When you say 'Not entirely compliant with the SP way of doing things," do you mean that because the portal only lets you modify HTML at the widget level? That seems to be the limitation I'm faced with and the fixed positioning doesn't work since I can only apply that CSS at either the page level on the container class or the widget level.

So for the solution you show in that diagram, you're saying I would have to put the entire page content in one container and one row, put the sidebar on the left column, and put everything else within rows and columns of a second column of the same parent row. And repeat this on every page in my portal?

Yup, that's the way it'd work in normal HTML. As you mention, SP doesn't seem to give you that level of granularity so it's a bit of a rock and a hard place.

And that makes sense about not using margin for fixed positioning. I replaced "margin-bottom" with "bottom" and got the following:

It surprises me that bottom would still leave you with that result. You could try setting top, bottom, and left explicitly and let the browser determine height dynamically instead of setting it to 100%. Off the top of my head I can't remember which rule takes precedent when both of those are used together (I believe height likely does).

View solution in original post

Jordan14 · ‎08-17-2018

Not sure if this thread is dead but this is what I was able to achieve using Nathan's linked tutorial. The code mentioned in the tutorial does need be reworked slightly however. Also if your going to use the tutorial, make sure you use the bootstrap version 3 code. (I think service now is on 3.3.7 or something?)

Feel free to pm me if you need any help with this.

Excuse the mock design...

Cheers,

Jordan Thompson - Apprentice

meetyaks · ‎10-11-2018

Good work, Jordan! If it's your hack work, would it be possible to share? meetyaks @ gmail

Jordan14 · ‎10-17-2018

Hey,

Please check my reply to thoma5.

This should help you out.

Thanks,

Jordan

thoma5 · ‎10-16-2018

Hi Jordan,

Not sure how to PM but would you be able to share the code /changes you've made from Nathan's example? I'd love to get some more insight on this 🙂

Thank you,

Thomas

Jordan14 · ‎10-17-2018

Hey,

I've decided to pack up what I built into a XML Record for everyone.

What's Included?

Header Widget: JT - VerticalNavBar

What do I need to get this working?

Download the XML Record linked in this post
Apply it to your Development Instance.
Apply the new header widget to your Portals existing theme or create a new theme (Suggest creating a new theme).

FAQ - Or what I think will be asked:

Q: The header is overlapping the widgets on my page.

A: I've found one of the limitations of having this type of navbar, it does cut off about 20% of the page. In order to fix this, on the side that your navbar sits place a suitable column in the page designer. In my widget it requires 'Size - md = 3' on the column. Check the image below:

Q: What Instance Version does this work on?

A: It was built on London Patch 0, but should work on some Jakarta versions. All Depends on Boostrap Version I think.

Feel free to post below anymore questions, so I can add them to the FAQ once answered.

Hope this helps, consider it a basic template to develop on-top of.

Thanks,

Jordan