Colour of menu on tablet and mobile

Hi there,

The colour of the Primary Menu in desktop mode is (correctly) the primary colour of my theme (#181f3f), but in tablet and mobile mode, the menu I get after clicking the hamburger icon seems to be black rather than the primary colour. I have looked through the colour settings but couldn’t readily see any menu options set to black. Is there a way to change the menu colour for the tablet and mobile mode?

The website is https://www.russellip.com.

Many thanks in advance!

Iain

Hi there,

Please try to add this code to Customize > additional CSS:

#mainnav-mobi ul li.menu-item.current-menu-item a {
    color: #181f3f;
}

Regards,

Thanks very much Awan. I tried this but it changed the colour of the text of the word “Home” on the menu from white to #181f3f. It didn’t change the colour of the menu itself though. Do you have any other thoughts on how I might change it?

If the “Home” menu color is changed, then it’s mean the Home page is currently opened.
the current-menu-item class is automatically assigned to the menu item when the related page is opened.

Thanks for your reply Awan. I’m sorry, but I don’t fully understand the suggestion on how to fix this. To help show what I mean, I’ve included a screenshot of how the home page looks on mobile view. The menu with Home, Updates, Get In Touch had a black background, but I would like this to be #181f3f rather than black. How can I change that, please?

Oh I think you mean the container of the main menu, not the color of the selected menu.
Sorry for this misunderstanding.

To change the background color of the main menu container, try this code instead:

nav#mainnav-mobi {
    background-color: #181f3f;
}

Works perfectly! Thanks so much!

1 Like