• David Tessaro

Mobile Menu Header Icon CSS Fix

Here’s a quick and clean fix for something you may encounter if you try giving a white background to your header nav element.

To illustrate this, I’ll walk through the steps you may have taken to encounter this problem in the first place, then show you how to fix it with some custom CSS.

1. Click on the Service Portal Configuration module in the navigator:

2. Then click into the Branding Editor.

3. Make sure your site is selected in the dropdown, then click Theme Colors.

4. In the Navbar background field, click on the color picker and choose white.

You’ll see that your header navbar turned white.

The ServiceNow logo doesn’t do well here with a white background. So obviously you’ll only use white as a background color if you’re logo jives with it. Otherwise, everything is looking pretty decent so far. Until….

5. Shrink your browser width down until the responsive header kicks in.

We would expect to see the button icon for the header menu. But it’s white by default, so it’s hidden against the white background until you hover over it.

We obviously need to change the colors to resolve this. However, there are no options available to us in the Brand Editor that will work here. We have no choice but to include some custom CSS.

6. Go to the Themes module and open the theme for your portal. If you’re using the out-of-box header, it’s called Stock.

7. You may already have a custom stylesheet you are using. If so, open that stylesheet. If you don’t have a custom stylesheet, click the New button on the CSS Includes tab to create a new CSS Include.

Give your new include a name, such as “CSS Overrides”. Then click the magnifying glass on the Style sheet field. We’re creating a new style sheet, so click New. Give the style sheet a name, such as “portal_overrides.css”.

8. We want to write some CSS to override the current styles. How do I know what CSS to use? One quick and dirty way is to use Chrome’s element inspector to find out classes and styles will work here. I’ll save that topic for another post.

The CSS class we want to target to override that white icon is “.navbar-inverse .navbar-toggle .icon-bar”, and we’ll pair it with the color property. The color I chose is the same color as the header’s bottom border, #455464. Paste this CSS into the CSS field.

.navbar-inverse .navbar-toggle .icon-bar { background-color: #455464; }

9. Click Submit on the style sheet to save the sheet. You’ll land back on the CSS Include form with your new style sheet selected.

10. Click Submit and the CSS Include will be added to your portal’s theme. Now go to your portal, shrink down your browser width, and check out the icon.

Looking pretty good, right? Now hover over the icon.

Seen prettier color combos in Uncle Keith’s pajamas, eh? So, let’s add another style to our stylesheet.

11. Go open it up from your theme. Remember, you’ll need to open the theme, then the CSS Include, then finally the style sheet to get to that CSS.

Let’s add in some styles for the hover and focus states of these classes.

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: #ededed; }

Paste this CSS into the CSS field after the first style, then click Update.

12. Go to your portal and check out the hover state of that icon. Ah, much better.

Now you are free to use a white background in your header without losing the menu icon. To sum up our work, we:

  1. Changed the color of the header nav by using the Brand Editor.

  2. Created a new CSS Include and Style Sheet for our portal’s theme.

  3. Added styles for the passive and hover states of the header menu button.

Aloha, Jeff

Interested in learning more about what a customized Service Portal can do for your organization?

#css #serviceportalhowto #customizingserviceportal #serviceportal #mobileheadericons