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

lrossy31 · ‎08-01-2019

Hello Chris,

This is a very nice way to build a side bar. I am trying to do the same thing, however I need the side nav bar to be on the second container or a column of a second container because we are keeping the main header. When I try to do this in the second container the sidebar height is beyond my footer. How can I manage to give a height that is pertaining to the container size not going beyond the footer? I will greatly appreciate your input.

Luis

thoma5 · ‎05-07-2018

Hi Guys,

This is neat! So question... when you render the page in portal do you still have the horizontal header menu at the top?? In the he HI Service Portal site, it seems to have the actual header stuck on the left vs a column, because when the user scrolls the left header stays still while everything to the right of it moves as one page.

I am currently experimenting is changing the CSS of the header widget that the theme is calling. Because essentially a portal uses a theme that calls a header widget to display their header right? For now, I'm trying to figure out how to stop the header from taking up all the row space as a wrapper and pushing everything under or below it.

I'm trying to follow the bootstrap examples from Nate but they're only half helpful. I'll post more if I figure it out, but if you guys beat me to it, please feel free to share thoughts!

I know you can't post any code, but maybe if you could lead us the way to the right direction that would definitely be helpful

Thanks,

TT

Chris Sanford1 · ‎05-07-2018

Hey Thomas,

Fixed positioning is what you're looking for to get the left nav to be sticky when you scroll. I was able to get that same functionality as HI Service Portal with my solution and I do also have a fixed header and footer. The challenge I had was that I had to manually set the heights and position as percentages of the viewport height for each element so they didn't overlap each other.

As for getting the leftnav to be part of the theme, I have not been successful. I tried creating a separate HTML div on the header widget and applying fixed positioning CSS to it. Still all my containers were positioned underneath the left nav. For my solution I have created a widget for the leftnav content that I instantiate in its own container/row/column, then I define my CSS at the page level on the container class, and repeat for every page on my portal. Looking at the source HTML and CSS for the HI Service Portal, I suspect they might have done it the same way.

Seth Rose · ‎05-16-2018

This is something that we have been trying to accomplish as well. I was able to get a basic sidebar on the page with the bootstrap option above, however I was unable to fit the remaining content around it. Any suggestions would be really helpful.

Jordan14 · ‎10-17-2018

Hey,

If you're still looking for a solution, check my reply to thoma5 on my post.

Thanks,

Jordan