How do I edit the width of the header menu sp widget?

[Chad7]

I have a service portal that was using the OOB "Header Menu" widget. The header has our company logo on the left and, if I have only 7 menu items, everything fits neatly on a single line. However, a new 8th menu item is being added and this throws things off so that the logo appears on one line and all the menu items on a separate line below it, which looks very disjointed and ugly. There is so much white space on either side of the header menu, though, more than enough for everything to fit on a single line, so I'm trying to figure out how to extend the header width so that everything can fit in a single row. I cloned the Header Menu widget so that I can make edits, but it seems like nothing that I change has any affect on reducing the header white space at the ends to extend the usable width. Can any point me to the section of code that controls this?

[Amit Gujarathi]

HI @Chad7 ,
I trust you are doing great.

To address the issue of adjusting the width of the header in your ServiceNow Service Portal so that all menu items fit on a single line, you'll need to make some changes to the CSS of the cloned "Header Menu" widget. The CSS is likely constraining the width of the header, and by adjusting it, you can extend the usable width to accommodate your additional menu item.

Here's a general approach to follow:

1. Locate the CSS File: In the ServiceNow Service Portal, CSS is often defined in a separate file or within the "Style" tab of the widget editor. If you've cloned the "Header Menu" widget, you should have access to its associated CSS.

2. Identify the Relevant CSS Class or ID: Look for the class or ID that defines the styling for the header. This might be something like .header-container or #header-menu. It's this CSS rule that you'll need to modify.

3. Adjust the Width Property: Once you've identified the relevant CSS, look for properties like width, max-width, or min-width. You might find something like max-width: 1200px; which constrains the header width. You can increase this value to allow more content on the same line.

4. Consider Responsiveness: When making such changes, it's important to consider how this will affect the responsiveness of the header on different devices. You might want to use media queries to adjust the width for different screen sizes.

Here's an example of what the CSS modification might look like

@media (min-width: 1200px) {
    .header-container {
        max-width: 1400px; /* Adjust this value as needed */
    }
}

[Chad7 · Accepted solution]

Hi Amit,

Thanks for taking a stab at it, but what I actually ended up needing to do was edit the navbar branding properties in the header record.