Change menu background color

[PlanetPluto]

Hi, I noticed in previous answers to this topic was to go to:

X -> Theme Options -> CSS and enter code. Under Theme options, there is no CSS section? See below. Could you please be more specific. Many thanks.

[PlanetPluto]

Apologize for the above but the image I kept trying to upload seemed to be truncated. Anyway the Items under x > theme options are:

Stack
Ethos
Layout and Design
Typography
Buttons
Header
Footer
Blog
POrtfolio
Social
Miscellaneous

[jade]

Hi @PlanetPluto,

Please see the screenshot below.

Hope this helps.

[PlanetPluto]

Ok, thanks Jade. My wordpress nav are white background with dark text and the CSS bit is very light and can hardly see it. How did you get your to be dark like that with white text?

I noticed when you open the CSS it sais that it is a global “CSS”. What happens if the theme is updated? Does this get overwritten?

Thanks

[PlanetPluto]

I entered the CSS code and it did not work. So I am stuck?

[mldarshana]

Hi There @PlanetPluto

Those global CSS will be saved in the database, so it will not erased or overwrite when you update your X/Pro theme.

I have checked your site URL assigned in this license and I see that you already have a different background color.

If you just want to change menu background color, try adding the following CSS rule into your X -> Theme Options -> CSS area.

#menu-primary-menu {
    background-color: green;
}

If not, please provide us with your example page URL to check your issue.

Please make sure to clear all caches when testing your site (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

Thanks!

[PlanetPluto]

Thanks. Yes that worked to just change the background of the menu items only. The rest of the top strip is unchanged however.

Yes, the whole top strip is already colored. This was not done by me. So I don’t know where it was done and I cannot find it. There is nothing in the CSS that seems to refer to it.

How can I change the color of the whole top strip? Much appreciated.Your speedy responses and help on this forum is extremely valued.

[PlanetPluto]

More searching and trying things, I found the answer by putting this in CSS

.x-navbar {
background-color:red;
}

[ruenel]

Hello @PlanetPluto,

In most stacks, you do you need to add any custom css to change the background color of the navbar. Please be informed that you can change it if you go to X > Theme Options > {Your Stack}.

For example in Renew stack, you’ll have this:

Hope this helps.