Colors for Menu Background & Footer

Hi! I’m having THE HARDEST time getting our menu & footer right.
The menu is the biggest problem. The background is white, which is fine on desktop & laptop views.
But on the mobile view, the menu items disappear because they’re white too. :confused:

I’ve tried multiple times to change the color, but canNOT get it to change.

Thanks in advance. :slight_smile:


Well, the menu background on mobile pulls the color you set for the menu on larger screens. What you need to do is add this in a custom CSS plugin:

@media only screen and (max-width: 991px) {
   .site-header {
       background-color: #333;

Thanks so much, Vlad.

I should have specified. Custom CSS plugins are out of my capabilities at the moment. What I’d like to do is change the color of the background. I just can’t figure out how to change the color of the background & the desktop / laptop menu text color. Where in the customizations area do I go / what do I do?

Thanks so much.

I might not understand this correctly, but you need to change it where you did the first time and you made it white: Customize > Colors > Menu background and Top Level menu items.

The code I gave you (which is easy to apply) is because there’s no option to change the menu background on mobiles.

Thanks, Vlad! :slight_smile:

[Customize > Colors > Menu background and Top Level menu items] is what I keep trying to do, but something won’t allow it.

I get the color selector showing up in a tiny tab, and when I change the color code, nothing changes on the page. :confused: I wonder if I inadvertently changed a setting somewhere, and disallowed these changes?

Not sure what to say, I mean you did change them at some point from the options since they’re different from the default colors.
Could you send me an admin account to so I can see what’s going on?

Vlad – is there a way to make the hamburger bars (mobile menu) change color?

See on a mobile device.

The background (when scrolled to the top) is grey after I put in the Custom CSS you showed up above in this thread, and the menu is in 3 white lines.

I’d like the 3 white menu lines to be orange, to match with the rest of the theme colors I have selected. How do I do that?

Love using Sydney Pro!


@kirit: Add this also in your custom CSS please:

.btn-menu {
     color: #dd9933;