- This topic has 5 replies, 2 voices, and was last updated 10 years, 5 months ago by
.
-
Posts
-
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.
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.
Thanks Tom.
I’ll have to investigate how http://argedia.com/ managed to make it work.
Regards,
Debi.
Try adding your menu items as “Custom Links” so WordPress doesn’t see them as current menu items.
They are Custom Links, to different GP “Sections”, e.g. /#generate-section-4.
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 }
- You must be logged in to reply to this topic.
