Question

当您单击此网页上的导航时，nav元素将保持突出显示。如果您导航到其中一个内页，则突出显示消失。我们如何才能突出显示该页面的子页面？

http://www.allinsure.ca/services/ - 尝试点击子页面;服务上的灰色亮点不再存在。适用于包含子页面的所有页面。

有关如何解决此问题的任何想法？我还注意到面包屑不会直接返回到上一页 - 而是链接到Portfolio Categories。

也许可以说＆＃34;当选择此页面时，请突出显示此导航项。＆＃34;

我们正在使用Cherry Framework。那和wordpress都是最新的。

全部谢谢！

Answer 1

当您在子页面上时，请查看由wordpress设置到主导航的“current-page-ancestor”类。

所以你可以用纯CSS解决这个问题。

只需在main-style.css中更改此部分：

.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;
}

为：

.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;
}

我刚刚注意到“current-page-ancestor”类仅适用于页面类型，但不适用于自定义类型。要在protfolio条目中高亮显示“服务”页面，它会更复杂一些。您可以使用过滤器 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');

很抱歉我现在无法检查我的代码，但我遇到了类似的问题，可以使用 nav_menu_css_class 过滤器解决问题。

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

1 个答案: