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

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

Home Forums Support Background hover, background colour not changing in 1 pager layout

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #349681
    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

    Tatiana Hindes
    Graphic Designer – Print and Digital

    GeneratePress 1.3.48
    #349694
    Tom
    Lead Developer
    Lead Developer

    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.

    #349702
    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?

    Tatiana Hindes
    Graphic Designer – Print and Digital

    #349703
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #349741
    Maria

    Fantastic work around, thank you so very much.

    Tatiana Hindes
    Graphic Designer – Print and Digital

    #349813
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.