如何使用活动类设置主菜单的样式

时间：2018-05-16 作者：SMWalker

我已经能够用hover类设置主菜单的样式，但active类不起作用：（www.gehrkesdharwoodflooring.com）

.main-navigation {
    color: #b2a79b !important;
}

.main-navigation a:link {
    color: #b2a79b !important;
}

.main-navigation a:visited {
    color: #b2a79b !important;
}

.main-navigation a:hover {
    color: #4d4d4d !important;
}

.main-navigation, #primary-menu a:active {
    color: #4d4d4d !important;
}

2 个回复
SO网友:Nathan Johnson

看起来你可能把:active CSS pseudo class 和一个实际的.active 班伪类表示用户正在激活的元素。它不是活动页面。

如果要使用active 类，您可以使用nav_menu_css_class 要添加到导航菜单类的过滤器。

function wpse_nav_menu_css_class( array $classes, $item, $args, $depth ) {
  if( in_array( \'current-menu-item\', $classes ) ) {
    $classes[] = \'active\';
  }
  return $classes;
}
add_filter( \'nav_menu_css_class\', \'wpse_nav_menu_css_class\', 10, 4 );
然后，要设置活动类的样式，

.main-navigation, #primary-menu .active a {
    color: #4d4d4d !important;
}
否则，您可以使用current-menu-item 而不是类。（请注意连字符而不是下划线）

.main-navigation, #primary-menu .current-menu-item a {
    color: #4d4d4d !important;
}

SO网友:IvanMunoz

您的代码中没有.active，您只有。主导航li。当前\\u page\\u项目a

因此，这应该解决这个问题：

.main-navigation li:hover a { color: #4d4d4d; }
.main-navigation li.current_page_item a { color: #4d4d4d; }
你同意吗？

结束
标签： css   小码农  

相关推荐

Custom CSS In Uploads Folder

我想知道上传文件夹中是否有自定义CSS文件。我从以前的开发人员那里继承了一个自定义主题，前端的大量样式都是从这个样式表派生出来的，它同样不在主题或插件文件夹中，而是wp-content/uploads 文件夹我正在努力找出它是如何推导出来的，但它确实存在。这是否被视为不良做法，或者是否有这样的用例？我相信之前的开发人员提到了Visual Composer或JS Composer以及编译更少的文件。。。但我对此不确定，他已经失去了联系，我想知道为什么我们要以这种方式使用样式表，因此这个问题是关于最佳实践的，