Great Theme – How Can I Change the menu bar background colour?

Hello Paul,

Use this custom CSS

header.bloginfo{
background: #55acee;
}

Hope it helps. Let us know if you need help with anything else!

Thanks

It doesn’t seem to do anything, It’s the solid black bar I’m trying to edit

Is there a list of the various attributes please or do I have to interpret them from the css files.

(This is all new to me)

I can’t understand what you want to say please elaborate your query.

See my site here:

https://barrettnas2.synology.me/wordpress/

I want to change the colour of the black menu bar (and probably the font colour, hover colour, hover text colour)

I need to know what css elements address that area.

Also the snippet of code you kindly sent me earlier does not appear to work, I enter it in the theme’s styling box and nothing happens, even if I clear my cache.

I hope that helps?

• This reply was modified 7 years, 8 months ago by pb52.

Hello there,

Add the following custom CSS to customize-> Additional CSS

// for black menubar

.nav-menu {
    background: #009cee;
}

//font color

.main-navigation li a {
    color: #333;
}

//hover text//

@media screen and (min-width: 768px){
.main-navigation li a:hover {
    background-color: #333;
    color: #fff;
}
}

Hope it helps and let me know if you require any further assistance.

Hi Poonam

I cut and pasted the text into Customising > Additional CSS, edited the bar colour to #435e95 (a dark blue), saved and published, viewed the web page and flushed the browser’s cache.

Nothing happens. Bar is still black. What am I missing please?

Paul

Hi Poonam

See for yourself here: https://barrettnas2.synology.me/wordpress/

Hello,
When I inspect the element I can’t find the given CSS.
Have you added it correctly?
Try using important

.nav-menu {
    background: #009cee!important;
}

Let us know if you need help with anything else!

Hi Poonam

Thanks for your reply. Here is all the text from the Additional CSS box in the theme customisation screen:

/*
You can add your own CSS here.																		
Click the help icon above to learn more.
*/

// for black menubar
.nav-menu {
    background: #009cee;
}

//font color
.main-navigation li a {
    color: #333;
}

//hover text//
@media screen and (min-width: 768px){
.main-navigation li a:hover {
    background-color: #333;
    color: #fff;
}
}

I cut and pasted it directly from the email notification that the forum sends, and pasted it as plain text. I don’t understand any of the technical aspects of CSS so I have no idea if I have done something wrong.

Paul

Now copy from here and paste then check

.nav-menu {
    background: #009cee;
}
.main-navigation li a {
    color: #333;
}
@media screen and (min-width: 768px){
.main-navigation li a:hover {
    background-color: #333;
    color: #fff;
}
}

That’s the one!

Than you so much.