Active Page Highlights Parent and Child Sub-Menus

• 

  gwasicki2 · Member · Dec 6, 2017 at 3:16 pm

  • Copy link
  • Add topic to favorites

  I am creating a site for my company and I am having an issue with the highlighting of my menus. Right now I have CSS written so that when a child or parent menu is selected, it highlights the parent menu. But anytime I click on a sub-menu or the parent menu, it highlights both the parent menu and the sub-menu. So to rephrase anytime any menu is clicked, the parent of that section and all the children menus of that section get highlighted with the color I have selected. It’s a live site and a WIP so I have menu drop-downs removed so it doesn’t look unprofessional.

  Here is the CSS I have written:
  a:hover {
  color: #00FFFF !important;
  }

  #menu-primary-menu .current-menu-item a, .current-menu-ancestor a {
  color: #00FFFF;
  }

  Here is the link to the site: http://www.ls-gs.com

  I can try to take a picture and post a visual of what is happening.

• 

  thesacredpath · Member · Dec 6, 2017 at 8:12 pm

  • Copy link

  Hi @gwasicki2, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking for help from the theme author directly or ask in the volunteer-based WordPress.org forums. Since you are using a premium theme, it should come with support from StudioPress.

  The differences between WordPress.com and WordPress.org.

  I looked at the demo site for the theme you are using, and it doesn’t have any submenus otherwise I would have seen if I could give you some quick CSS to get you started. I would be more specific in the first rule like this.

  .genesis-nav-menu a:hover {
  color: #00FFFF !important;
  }

  On the second rule, you may need to do something like this.

  .genesis-nav-menu .current-menu-item > a, .genesis-nav-menu .current-menu-ancestor > a {
  color: #00FFFF;
  }

  The above is all a guess, so it may or may not work.