main menu background color

Hey there ameey,

Hope you’re well today!

You can change the active menu item and hover background color and font hover color with some custom CSS. Please try adding the following CSS code to Appearance >> Theme Options >> Custom CSS:

.main-navigation ul li.current_page_item a, .main-navigation ul li.current-menu-item a, .main-navigation ul li.current-menu-parent a, .main-navigation ul li.current_page_parent a, .main-navigation ul li.current-menu-ancestor a, .main-navigation ul li:hover > a {
background: #fff;
color: #333333;
}

Replace the color hex values with the the one you want. This should affect only current menu item, and hover background color and font color. You can use sites similar to this one to get hex value for the color of your choice:

https://www.color-hex.com/

If this doesn’t work could you please post link to your site so I can take a look?

Best regards,
Bojan

I’ve had same problem….at least I think it’s same problem. Trying to change the “hover” color and “active” colors using the above code and it didn’t work. Any suggestions?

Hey there shandycreative,

How are you doing today?

Could you please try adding the following CSS code as described above:

.site-header .main-navigation ul li:hover > a {
background: none repeat scroll 0 0 #F15A23;
color: #fff;
}

This should change the hover background and text color. Simply replace the color hex values to the ones that you want. See link in my previous post if you’re unsure how to get color hex values for the colors of your choice.

As for the current menu item please add the following:

.site-header .main-navigation ul li.current_page_item a, .site-header .main-navigation ul li.current-menu-item a, .site-header .main-navigation ul li.current-menu-parent a, .site-header .main-navigation ul li.current_page_parent a, .site-header .main-navigation ul li.current-menu-ancestor a {
background: none repeat scroll 0 0 #F15A23;
color: #fff;
}

Here are also original hover background and text color, repeat the process from above.

If this does’t work could you please post link to your site so I can take a look?

Hope this helps ??

Best regards,
Bojan

I’m pretty sure my “newbie” is showing. I still could not get the “hover” to change.

I don’t have much of a site yet….just starting out. But it’s shandywordpress.com

Thanks for any help.

Hey again shandycreative,

I’ve checked your site and you have maintenance on so I’m not being able to see anything. Could you please disable it so I can check that ??

Best regards,
Bojan

Hi there!

I am unable to change the main menu background color …. what I am doing wrong?

Hey there Annouchka67,

How are you today?

Could you please open a new thread for future questions in order to avoid confusion since this is not related to menu item hover color and background color.

To change navigation background color please try adding the following CSS code to Appearance >> Theme Options >> Custom CSS:

#page-header .container header .menu-wrapper.right-pos {
background: #000;
padding: 0 10px 10px 10px;
}

Replace the color hex value to the one you want. You can use sites similar to this one to get hex value for the color of your choice:

https://www.color-hex.com/

Hope this helps ??

Best regards,
Bojan

Maintenance is now “off”. Sorry about that.

TIA for help.

Hey again shandycreative,

Maintenance mode is still on https://screencast.com/t/of24VHou7ot, please let me know when it’s disabled so I can take a look.

Best regards,
Bojan

Thank you Bojan, sorry but I was unable to make you understand … I just want to change from orange to blue … all the option you have listed above are not usefull in my case … and changing from the Appearance >> Theme Options >> Colors does not works!

So sorry….can you try again now? Forgot to “save”. That’s what happens when I haven’t had morning coffee yet. ??

Hey there,

@annouchka67 if this is what you’re looking to do https://screencast.com/t/BGkBoB4eWdd please try adding the following:

.site-header .main-navigation ul li:hover > a, .site-header .main-navigation ul li.current_page_item a, .site-header .main-navigation ul li.current-menu-item a, .site-header .main-navigation ul li.current-menu-parent a, .site-header .main-navigation ul li.current_page_parent a, .site-header .main-navigation ul li.current-menu-ancestor a {
background: none repeat scroll 0 0 #0000FF;
}

This will make menu hover background color blue. Please make sure to add it as described above. If this doesn’t work please post link to your site so I can take a look.

@shandycreative It appears that you have a lot of code added for the same classes. So could you please remove everything related to the menu items normal and hover colors and add the following:

.site-header .main-navigation ul li a {
background: none repeat scroll 0 0 #A9D8A0;
color: #3a316d;
}

.site-header .main-navigation ul li.current_page_item a, .site-header .main-navigation a:hover {
background: none repeat scroll 0 0 #000;
}

The first part will add your current font and background color so leave that as it is, the second part just replace the color hex value (#000) to the color of your choice. This color will be the hover background color of the navigation item.

Hope this helps ??

Best regards,
Bojan

Thank you Bojan yes this was what I wanted … the answer was easier than expected: Appearance > Theme options > General > Default theme styles. I disabled the option and now changes are correct! Thank you and sorry!

Hey there Annouchka67,

Glad you managed to find that one ??

Best regards,
Bojan

You must think I’m a moron, and I probably am. I tried what you suggested and the color when I hover does not change.

I want the background to be the seafoam (#B3D9A8), which it is. I want the text to be blue (#3a316d) which it is.

When you hover, I want the blue to turn orange (#F68C28) and that isn’t happening. I’m sure I’m doing something wrong, just can’t figure out what that is.