Menu colours

Resolved Roy de Laat
(@roydelaat)

11 years ago

Is there an easy way to change the colours of the menu?

As far as I can see, they are now based on the background colours you’ve chosen. Is there a fast, easy way to adjust the menu colours without having to change the background colours of the theme?

Maybe someone can give me a CSS code (with some comments) on how to change the seperate colours of the menu?

Thanks in advance!

Viewing 4 replies - 1 through 4 (of 4 total)

Bojan Radonic – WPMU DEV Support
(@wpmudev-support4)

11 years ago

Hey there roydelaat,

How are you doing today?

I’ve checked the theme that you’re using and yes you are able to change the background color of whole navigation bar from the customizer.

If you’re using to have different colors for each of the menu items that is possible too with some custom CSS since each menu item has a class with specific ID which you can target and apply different background color to.

If that is what you’re looking for please post link to your site where I can see this and I’ll help you out with the CSS code 🙂

Cheers,
Bojan

Thread Starter Roy de Laat
(@roydelaat)

11 years ago

http://www.zaalvoetbalrooi.nl/ is the website.

I would like to change the background color and the hover background color of the submenu’s. In short, I would like to change all of the white and light grey used in the menu and the text colour of the submenu.

Now they are white and grey because the website itself has a white and grey background. I would like to let the background still be white and gray, but change the menu colours.

Thanks for your help!

Roy
Bojan Radonic – WPMU DEV Support
(@wpmudev-support4)

11 years ago
Hey there Roy,

Thanks for the clarification 🙂

Please try adding the following CSS code in the style.css file of your child theme or add it in your site using the following plugin:

http://wordpress.org/plugins/simple-custom-css
```
.main-navigation li.menu-item-has-children:hover a:hover {
    color: rgba(255, 255, 255, 0.7);
    background: #ba0600;
}
```
This will make your top level navigation hover to be the same as the others not having sub menus.

The following part will affect hover text color and hover background color of your submenus only.
```
#site-navigation.main-navigation li.menu-item-has-children li a:hover {
    color: #fff;
    background: #fff;
}
```
The following will change submenus background color:
```
.main-navigation .nav-menu > .menu-item-has-children:hover > a, .main-navigation li.menu-item-has-children:hover a, .main-navigation ul ul {
    background: #ffffff;
}
```
Replace color hex values to what ever suits you the most. You can use sites similar to this one to get hex value for the color of your choice: http://www.color-hex.com/

Hope this helps and have a great weekend!

Cheers,
Bojan
Thread Starter Roy de Laat
(@roydelaat)

11 years ago

Thanks a lot! It works perfect now! I really appreciate your effort!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Menu colours’ is closed to new replies.

Tags