Menu items background color

Hey Rocuant,
First enable the css classes in the menu items by selecting this option in the menu screen options:

Then add a custom class like “red” to the menu item:

Then add CSS for the menu background color in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field like this:

.red {
	background-color: red;
}

If you want the text color to also be different, like white, add this:

.red .avia-menu-text {
	color: white;
}

This is the expected results:

Then do this for each item.

Best regards,
Mike

Hi,
Yes, use a unique class name and add your hex color code to the css, like this:

.my-hex-color {
	background-color: #F6BFCA;
}

Best regards,
Mike

Hi,
In the menu item add your unique class name like my-hex-color

Then in your Quick CSS add:

.my-hex-color {
	background-color: #F6BFCA;
}

create a new class name for each new color.

Best regards,
Mike

Hi,
Please note that each class needs to be unique, like this:

.my-hex-color-one {
background-color: #F6BFCA;
}

.my-hex-color-two {
background-color: #F2DFD7;
}

.my-hex-color-three {
background-color: #F6BFCA;
}

.my-hex-color-four {
background-color: #F2DFD7;
}

.my-hex-color-five {
background-color: #F6BFCA;
}

.my-hex-color-six {
background-color: #F2DFD7;
}

and the class that you add into the menu Clases CSS should match the color that you want.

Best regards,
Mike

Hi,

Glad to know that @Mike was able to help you out! Please feel free to open another thread if you have more questions about the theme.

Have a nice day.

Best regards,
Ismael