[Resolved] Background hover, background colour not changing in 1 pager layout

[Maria]

Hi, I’m using GP Premium, Beaver Builder premium plug in and have created a 1 pager.
I have a Main Navigation Menu set to change background colour when hovering over as well as when that specific section is selected. But it is not working.
Question: how can I make this work? At the moment, all menu items appear to be ‘active’. I guess because the different sections they navigate to, all live on the same page.
But there should be a way to make this work! Or is it that this theme doesn’t allow for Landing pages?
Please help!
You can view the temp site here, notice how the whole nav is brown. It should be blue and only the selected item, with a brown background.
http://prettynicewebsite.com/cooknoosarecipes

[Tom]

WordPress adds a class to menu items when you’re on that specific page, which you can then style as your current menu item inside the color picker.

You can either style your current menu items to look like your regular menu items, or try adding your menu items as custom links (https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-link) in hopes that WordPress doesn’t make the connection to the page and add that class.

[Maria]

HI Tom, thanks so much for your prompt response.
All menu items have been created as custom links.
I’m lost as to what to do next to make this work. Any other ideas?

[Tom]

Ugh, WordPress being smart.

Ok, so we can just give it a hover color with some CSS:

.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover {
    background-color: #ffffff;
    color: #222222;
}

Just adjust the colors as needed 🙂

[Maria]

Fantastic work around, thank you so very much.

[Tom]

You’re welcome 🙂

[Author]

Posts