Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

Navigation colors with single page/multiple links

Home Forums Support Navigation colors with single page/multiple links

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #176563
    Francis

    Hello,

    I’m having trouble setting up the Navigation Colors using the Colors plugin when the navigation links are for a single page. My trst site: http://rgbwp2.designwallah.com/

    I’ve set the colors as follows:

    Navigation Colors: Background – red, Background hover – yellow, Background Current – blue

    Sub-Navigation Colors: Background – green, Background hover – magenta, Background Current – black

    These work: Navigation background, Background hover (only on Contact page), Background current (only on Contact page).

    For some reason, the colors for links that reference the single page do not work properly. e.g. the top-level links are colored blue, the hover color does not work for the sub-links.

    Any ideas?

    Thanks very much,

    Debi.

    #176639
    Tom
    Lead Developer
    Lead Developer

    Since all three of those pages are technically the same page, all of those menu items are set to your “current” colors.

    So the sub-nav colors are black with white text when current, and the top level colors are blue with white text.

    Hover colors don’t apply to current menu items.

    #176675
    Francis

    Thanks Tom.

    I’ll have to investigate how http://argedia.com/ managed to make it work.

    Regards,

    Debi.

    #176722
    Tom
    Lead Developer
    Lead Developer

    Try adding your menu items as “Custom Links” so WordPress doesn’t see them as current menu items.

    #176817
    Francis

    They are Custom Links, to different GP “Sections”, e.g. /#generate-section-4.

    #176964
    Tom
    Lead Developer
    Lead Developer

    Looks like they added custom CSS to make their current menu item match the regular menu item – however you could technically do this in the Customizer.

    .main-navigation .main-nav ul .current-menu-item > a,
    .main-navigation .main-nav ul .current-menu-parent > a,
    .main-navigation .main-nav ul .current-menu-ancestor > a,
    .main-navigation .main-nav ul .current_page_item > a,
    .main-navigation .main-nav ul .current_page_parent > a,
    .main-navigation .main-nav ul .current_page_ancestor > a {
        color: #fff;
        background-color: #222
    }
    
    .main-navigation .main-nav ul ul .current-menu-item > a:hover,
    .main-navigation .main-nav ul ul .current-menu-parent > a:hover,
    .main-navigation .main-nav ul ul .current-menu-ancestor > a:hover,
    .main-navigation .main-nav ul ul .current_page_item > a:hover,
    .main-navigation .main-nav ul ul .current_page_parent > a:hover,
    .main-navigation .main-nav ul ul .current_page_ancestor > a:hover,
    .main-navigation .main-nav ul ul .current-menu-item.sfHover > a,
    .main-navigation .main-nav ul ul .current-menu-parent.sfHover > a,
    .main-navigation .main-nav ul ul .current-menu-ancestor.sfHover > a,
    .main-navigation .main-nav ul ul .current_page_item.sfHover > a,
    .main-navigation .main-nav ul ul .current_page_parent.sfHover > a,
    .main-navigation .main-nav ul ul .current_page_ancestor.sfHover > a {
        background-color: #fd005f;
        color: #fff
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.