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.

[m_osborne]

Hi Tejaswini,

My team actually got this working on our service portal; however, it did require us to clone the Stock Header widget. This wasn't a big deal for us since we were making modifications to menu drop-downs anyway, but cloning widgets is not generally considered "best practice" by ServiceNow devs.

In the CSS of the Stock Header widget (in at least London, I am not sure about previous versions), there is a section that looks like the following:

/* PRB923910: Fix for Service Portal - Header Poorly Aligned in Safari */
@media screen and (min-width: 768px) { 
  .navbar-collapse {
    display: flex !important;
  }

What we did was clone the Stock Header widget and changed the value for the min-width from 768px to 1225px. Now the mobile menu header view (with the hamburger) is applied as soon as the window is sized below 1225px.

I hope this helps!

- Melinda

[Tejaswini Moha1]

Hi Melinda,

Thank you so much for the reply. Yes it worked for me.

Regards,

Tejaswini.