How to highlight top menu item when on child of sub page?

0
votes

I'm trying to get the top menu item to stay highlighted when I'm on a level 3 child page however I am only getting one level up highlighted when I use the current-page-ancestor class.

(see below)

What I want to happen (All Menu Parents Highlighted):

- Home 
- **Photos** 
  - **Album1** 
      - **Gallery1** (Current Page)
  - Album2

What I am currently have (Only one level up parent is highlighted):

- Home 
- Photos
  - **Album1** 
      - **Gallery1** (Current Page)
  - Album2

HTML when I'm on "Gallery1 Page":

<ul id="menu-menu-english" class="nav">
  <li id="menu-item-224" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-224">Home</li>
  <li id="menu-item-158" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-has-children menu-item-158 dropdown"><a title="Research" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Research /a>
     <ul role="menu" class=" dropdown-menu">
       <li id="menu-item-384" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-384">Pre – 1975</li>
       <li id="menu-item-383" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-383">1975-1990</a></li>
     </ul>
   </li>
 </ul>

CSS:

.current-page-ancestor {
   background-color:red;

}

1
csswordpressdrop-down-menunavigationhighlight
You have to look at your css definitions. Because you don't post any html (which you should) I can not make any guess. – Franco
I was reluctant to post the html code because a lot of the css classes are generated by Wordpress and are pretty convoluted. But I think the .current-page-ancestor is the effective css class. However when I define it only the second level parent is highlighted even though both parents have that class. – emcee
This has nothing to do with a class name but more about the element selectors. – Franco

1 Answers

0
votes

Your code doesn't clear. Maybe it doesn't work because your parent already have a background style. Try to add !important to override previous style.

.current-page-ancestor {
       background-color:red !important;
}