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 · ‎11-05-2018

Hey,

By the looks of this screenshot you have put the widget in the page designer and not embedded it in the portals theme.

To resolve this:

Remove my widget you have placed on your home page. (The navbar)
Go into the CMS view of ServiceNow and go to Portals > Clayco
Click the 'i' icon next to the theme field to change your current themes Header widget to my widget. This will remove your top navbar.
Alternatively, I would create a new theme with my header widget for testing purposes. This can be done by clicking the search button on the theme reference field, bringing up a window where a UI action will display "New".

Also, just to make sure this is the issue can you show your edit view on the page designer. This way I can see if you have the columns aligned correctly for the header.

In order to check this yourself please look at my FAQ.

Hope this helps.

Regards,

Jordan

Akhila22 · ‎04-11-2019

I want to have header menu along with vertical nav bar.. please help

Jayanthi · ‎01-27-2020

Hey Jordan ,

Am not able to move the wrapper left corner. please help.

Kim Sullivan · ‎07-11-2020

Anyone looking for a left nav or side menu, should check out this blog. Dan’s created the best one I’ve seen so far! https://danthedevman.com/blog/dkQrnYDzEMae4orVNgRc