Wordpress: CSS keeping menu item active when inside child pages Wordpress: CSS keeping menu item active when inside child pages wordpress wordpress

Wordpress: CSS keeping menu item active when inside child pages


If you right click on the about tab (when one of the child pages are open,) you should be able to inspect the element. (I use Chrome, but other browsers have this option.) You should see something like this. (This is an example from my theme):

<li id="menu-item-387" class="menu-item menu-item-type-post_type menu-item-object-page     current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-387"><a href="#">About</a>

Choose one of those classes and add some css. I use the 'current-menu-parent' selector.

(#menu .current-menu-parent > a {    background: #fff;   (or whatever styling you need to add)}

Hope this helps. If not, and your site is accessible from the web, a url would really help.


When you are on a child page, the Menu Item or Menu Link of the parent page of that active child page has a class current-page-ancestor,

you can make your menu active by just adding this to your CSS file or custom CSS

li.current-page-ancestor a {color: #0286ff !important; // or whatever style you want}