Highlighted menu item (when navigating to its page or child pages)

— > EDIT : Changed my Original Question <–

I solved a previous question about how to create a highlight to a Menu Heading when either it or “Child” menu items are selected :

FOR OTHERS, The following will help you create a menu highlight or text modification if you click on a Menu Heading or Subheading of a Menu :

/* === CHANGES HIGHLIGHT BACKGROUND COLOR OF SELECTED MENU ITEM --- */
 .header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a {
font-color:white !important;
background-color: #ededed;
border-style: solid;
border-color:red;
border-width:2px;
} 

/* ===== Changes TEXT or BOX COLOR TO MENU WHEN MENU ITEM (child or parent) is selected ==== */
.current-menu-ancestor > a {
font-color:white !important;
background-color: #ededed;
border-style: solid;
border-color:red;
border-width:2px;
}

My NEW QUESTION is a bit simpler I think, (hope)

WHAT I WANT : I would like to have the Shop Menu heading, in my case simply called “Shop” stay highlighted when it or any child pages/categories/products are clicked.

WHAT HAPPENS NOW:... when I click within the Shop … i.e, clicking through products within the Shop… the Menu highlight disappears… Any way to solve this ?

• This topic was modified 8 years, 3 months ago by alfpress.