Collapse Service Portal Header Menu Early (at 1160px)

[Randolph Picou1]

Hello ServiceNow community members!

I have a request from our users to change the way that the service portal header collapses. Here you can see the "full width" header.

Here is the reduced width header (resize the page width by dragging it to a smaller size or increase the zoom on the browser). Note that the menu has slipped onto a second line. This is what I'm trying to prevent.

After resizing or zooming in further, the menu collapses completely into this button.

The request is to skip the intermediate step and collapse the menu into the button at a specified px width, but I cannot identify where the change in the Stock Header widget should be made. I tried tooling around but could not find the right change. If anybody is familiar with this setup, could you point me in the right direction?

[nathanfirth · Accepted solution]

You can try setting this SASS variable in your theme record:

$grid-float-breakpoint: $screen-lg-min !default;

The default value is $screen-sm-min, changing it to "lg" should cover anything up to 1200px. If that's too much, you can change it to "md" which should cover up to 992px.

I did not test it, but these are standard Bootstrap variables, so it should work assuming ServiceNow has not hardcoded any media queries into their stylesheets.

Cheers,

Nathan Firth
Founder & Chief Creative Officer
nathan.firth@newrocket.com
serviceportal.io
newrocket.com

[Randolph Picou1]

Thank you! This worked like a dream.

[Dhavan Rao B V]

Where exactly this change needs to be done? Can you help to navigate to this style?