Hi @parklt
We’ve included a full menu section, including colors, in Vantage Premium. If you’d like to check that offering out go to Appearance > Vantage Premium.
To make the same change in Vantage Free install our CSS plugin called SiteOrigin CSS. Next go to Appearance > Custom CSS and insert the following:
/* Menu */
.main-navigation ul li:hover > a, #search-icon #search-icon-icon:hover {
background-color: #81d742
}
Replace the color value as required.
Thread Starter
parklt
(@parklt)
this is very helpful. Could you explain how I can change individual menu hover backgrounds? For example, if I want “About” to show as red instead of blue.
Thanks!
Thread Starter
parklt
(@parklt)
Also would you know how to change the background color of the dropdown menu as well?
Drop down colors look like this:
.main-navigation ul ul { background: #81d742; }
.main-navigation ul ul li:hover > a { background: 81d742; }
If you’d like to do a lot of color customising without the Premium version Customizer then I’d highly recommend getting started with our Custom CSS plugin. It has a Visual Editor component that’ll make a lot of things possible for any skill level.
https://siteorigin.com/css/
Changing backgrounds and hovers for individual items takes a bit more doing. You need to inspect each element, pick out the menu item ID and target it. Something like:
.main-navigation li.menu-item-1944 > a { background: red; }
.main-navigation li.menu-item-1944:hover > a { background: blue; }
Where .menu-item-1944 is the menu item you’re targeting. I unfortunately can’t get much further into that request, sorry.
Thread Starter
parklt
(@parklt)
This has been incredibly helpful thanks a lot!
For sure 🙂 Glad we could lend a hand.
All the best.
