Service portal header to display hamburger nav for wider screen widths?

[aarondelaveau]

I have a slightly customised header, When the screen width shrinks (to about 992px) The navigation elements wrap down to another layer which I don't want, I want the hamburger nav menu to be displayed instead.

I cannot see any classes being added via javascript, nor are there any obvious media queries that relate directly to the displaying of the hamburger nav.

The hamburger nav is currently displayed until the screen width reaches 768px, I want it to be displayed until the screen reaches 992px. - in order to avoid the nav elements wrapping down to other layers.

Any advice/tips would be greatly appreciated.

[philengles]

Hi Aaron,
  Hope you are having a good week. I would investigate the Theme attached to your Portal in there you will see CSS variables which references the media queries you were looking for. Hope this helps.

Best,
  Philip Engles

[aarondelaveau]

The media queries are not visible in the theme styles and unfortunately I think the issue is a little more complicated than that.

In the google inspector you can access the bootstrap style sheet directly. I did this and found all the 768px media queries that relate to the header and changed the value to 992px. This worked perfectly but as we know the changes made in the inspector are not permanent

I thought that if I copied the media queries that I changed to 992px into the header widget styles (I also tried adding them to the theme styles) they would override the boot-strap styles and I would be away laughing.

However this did not work. Media queries only work if they are listed AFTER the main style that they relate to in the style sheet and I have a tingling suspicion that this is why they didn't work — the media-query overrides I created somehow aren't being read in the right order? - A solution to this would be to just copy the entire bootstrap sheet with the edited media queries and the original unedited styles in the correct order, and paste it into the header widget/theme styles right? Wrong. the bootstrap style sheet has over 7000 lines of code which is far from ideal...

If there was some way to view and make permanent changes to the boot-strap style sheet that would be a dream come true (even better if you could make a copy and use that), I have looked into this and can't seem to find much.

Any ideas/thoughts would be greatly appreciated, as you can see I'm chasing my tail with this!

Many thanks,

Aaron

[m_osborne]

Hello Aaron,

Did you ever figure out how to implement showing the hamburger menu item on wider screens? I am needing to do this as well.

Thanks,

Mel

[Tejaswini Moha1]

Hello Aaron,

I  am also struggling with the same requirement. Did you find the solution to it? It would be very helpful if you share solution.

Thanks and Regards,

Tejaswini.