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

thoma5 · ‎10-17-2018

awesome, will check out!

Thank you!!!

donaldbatesjr · ‎12-04-2023

Old post, but overlap is easily solved with...
Apply above widget as header in service portal
Apply a css theme setting a 250px margin that handles all of the OOB pages e.g. related lists, records etc launched from a data table widget don't need their own pages, but those pages don't take into account your vertical widget, or if you tried to use the widget directly on bootstrap of your custom page.
section.flex-grow.page.sp-scroll {
margin-left: 250px;
}
Apply page specific css for every page you create so that you can reclaim space depending on zoom and screen resolution.
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 3000px) {
section.flex-grow.page.sp-scroll {
margin-left: 250px;
}
}
@media (max-width: 1700px) {
section.flex-grow.page.sp-scroll {
margin-left: 250px;
}
}
@media (max-width: 1600px) {
section.flex-grow.page.sp-scroll {
margin-left: 250px;
}
}
@media (max-width: 1500px) {
section.flex-grow.page.sp-scroll {
margin-left: 250px;
}
}
@media (max-width: 1400px) {
section.flex-grow.page.sp-scroll {
margin-left: 250px;
}
}
@media (max-width: 1300px) {
section.flex-grow.page.sp-scroll {
margin-left: 250px;
}
}

Lauren14 · ‎03-04-2019

Do you think it would be possible to have a top navbar with a logo and whatnot and also this sidebar for nav links?

Jordan14 · ‎03-05-2019

Hi Lauren,

This is definitely possible, I believe the Hi-Portal have this type of navbar.

A good start would probably be by using the OTB stock header navbar and developing on top of that, due to it already having the logo and top part.

nborowiak · ‎11-02-2018

What am I doing wrong here? I am still trying to wrap my head around using XML Records in ServiceNow.

Please advise @Jordan