Archived topic

Navigation colors with single page/multiple links

5 replies · Started by Francis on March 2, 2016

Viewing posts 1–6 of 6

March 2, 2016 at 6:32 am #176563

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.

March 2, 2016 at 12:56 pm #176639

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.

March 2, 2016 at 2:06 pm #176675

Thanks Tom.

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

Regards,

Debi.

March 2, 2016 at 11:23 pm #176722

Try adding your menu items as "Custom Links" so WordPress doesn't see them as current menu items.

March 3, 2016 at 6:52 am #176817

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

March 3, 2016 at 11:20 pm #176964

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
}

This archived topic is closed to new replies.

Start building better websites today.