Individual background colours for each main menu item

Hi there,

you could create some CSS like this, a separate CSS rule for each color you want to display:

.red a {
    background-color: #f00;
}
.green a {
    background-color: #0f0;
}
.blue a {
    background-color: #00f;
}

Then in the WordPress Menu editor give each of your menu items a CSS Class eg. red

This doc explains how to add classes to menu items:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Thank you for the quick response. I added the CSS and the CSS class.

The secondary drop down has also changed to the same colour, is it possible to only have that same colour as the hover state on the secondary menu items?

Hi Jennifer,

Can you link us to the page you're working on? So we to inspect the page and provide the CSS writeup.

Unfortunately Im unable to send a URL for the moment as the site isn't yet live and I've been testing the CSS on another site. When the site is live and if I have the same issue I will email through details. I'll keep this ticket support in my inbox for reference. Thank you.

Unfortunately Im unable to send a URL for the moment as the site isn’t yet live and I’ve been testing the CSS on another site. When the site is live and if I have the same issue I will email through details. I’ll keep this ticket support in my inbox for reference. Thank you.

No problem. Let us know when we can check it.

While waiting: you may have to style the selector ul.sub-menu specifically as well so the menu item's submenu doesn't inherit the background you've set on the parent menu items. :D

Example scenario:

If .red has submenu that inherits the red background color, you may have to do something like this:

.red ul.sub-menu{
    background-color: white;
}

Just to change the submenu's bg color to white. :)

I agree one would assume I would need to instruct the sub menu pages to use the same colour. Will advise.

Thank you, much appreciated.

No problem. Glad to be of any help. :D