在子页面上删除导航突出显示（wordpress）

Question

When you click on the navigation on this webpage, the nav element stays highlighted. If you navigate to one of the inner pages, the highlight goes away. How can we keep the highlight on subpages of that page?

http://www.allinsure.ca/services/ - Try clicking to a subpage; the grey highlight on Services is no longer there. Applies to all pages with subpages.

Any thoughts on how to fix this? I also notice that the breadcrumbs don't direct back to the previous page - instead it links to Portfolio Categories.

Perhaps there's a way to say "When this page is selected, highlight this navigation item."

We're using Cherry Framework. That and wordpress are both up-to-date.

Thanks all!

Answer 1

Have a look at the class "current-page-ancestor" which is set by wordpress to your main navigation when you are on a subpage.

So you can solve this with pure css.

simply change this part in your main-style.css from:

.header .nav__primary .sf-menu li.current-menu-item a, 
.header .nav__primary .sf-menu .sfHover a,     
.header .nav__primary .sf-menu .current-menu-parent a{
   background: none repeat-x scroll 0 0 #58585a;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   color: #fff;
}

to:

.header .nav__primary .sf-menu li.current-menu-item a, 
.header .nav__primary .sf-menu .sfHover a,     
.header .nav__primary .sf-menu .current-menu-parent a,
.header .nav__primary .sf-menu li.current-page-ancestor a{
   background: none repeat-x scroll 0 0 #58585a;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   color: #fff;
}

I've just noticed that the "current-page-ancestor" class works only for page types but not for custom types. To hightlight the Services page when you are on a protfolio entry, it is a bit more complicated. You could achieve it by using the filter nav_menu_css_class.

function _nav_menu_css_class($classes)
{
    switch (get_post_type()){
    case 'portfolio':

        $idOfServicePage = 1;

        if (in_array('menu-item-'.$idOfServicePage, $classes)){
            $classes[] = 'current-menu-item'; // or current-page-ancestor
        }

        break;

    }
    return $classes;
}
add_filter('nav_menu_css_class', '_nav_menu_css_class');

Sorry I can not check my code right now, but I have had a similar issue and could solve it by using the nav_menu_css_class filter.