Question

我正在尝试使我的菜单中的链接在正确的页面上处于活动状态。定位课程.current_page_item无效，因为.sidebar-primary a会覆盖此课程。

到目前为止，我已经在菜单项.nav-sidebar中添加了一些类，并在我的functions.php文件中插入了一些php，将类.active添加到当前菜单项。你会认为应该覆盖它。这样做已经成为一种时尚。

<li id="menu-item-210" class="nav-sidebar menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item menu-item-210 active "><a href="http://localhost/graham-every/" itemprop="url">Graham Every Ltd</a></li>

如您所见，.nav-sidebar和.active是可用的类。但是，使用以下CSS工作，但不会更改字体颜色。

.nav-sidebar.active {
color: #FFFFFF;
background-color: #395CAC;
display: block;
padding: 7px;
}

这似乎是因为它被.sidebar-primary a类简单推翻了。

我已尝试各种组合来定位活动状态但未成功，目前

.sidebar.sidebar-primary.widget-area a .nav-sidebar.active {
color: #ffffff !important;
}

＆＃13;

.sidebar-content .sidebar-primary {
  width: 270px;
}
.sidebar.widget-area .widget {
  border-bottom: none;
}
.sidebar-primary,
.sidebar-secondary,
#ez-home-sidebar {
  color: #395CAC;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
}
.sidebar.widget-area ol,
.sidebar.widget-area ul,
.sidebar.widget-area .textwidget,
.sidebar.widget-area .widget_tag_cloud div div,
.sidebar.widget-area .author-bio-widget,
.sidebar.widget-area .featuredpage .page,
.sidebar.widget-area .featuredpost .post {
  margin: 0 !important;
  padding: 15px 0px 15px 30px;
}
.sidebar.widget-area ul li {
  border-bottom: 0px solid #DDDDDD;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  list-style-type: none;
  word-wrap: break-word;
}
.sidebar-primary a,
.sidebar-primary a:visited,
.sidebar-secondary a,
.sidebar-secondary a:visited,
#ez-home-sidebar a,
#ez-home-sidebar a:visited {
  color: #395CAC;
  text-decoration: none;
}
/*--- PRIMARY MENU ---*/

.nav-sidebar a {
  display: block;
  padding: 7px;
  margin-bottom: 0px;
}
.nav-sidebar a:hover {
  color: #FFFFFF;
  background-color: #688bc9;
  display: block;
  padding: 7px;
}
.nav-sidebar.active {
  background-color: #395CAC;
  display: block;
  padding: 7px;
}
.sidebar.sidebar-primary.widget-area a .nav-sidebar.active {
  color: #ffffff !important;
}
ul.sub-menu.nav-sidebar-sub {
  padding-left: 10px !important;
}
/*--- END PRIMARY MENU ---*/

＆＃13;

<aside class="sidebar sidebar-primary widget-area" role="complementary" aria-label="Primary Sidebar" itemscope="" itemtype="http://schema.org/WPSideBar">
  <section id="nav_menu-7" class="widget widget_nav_menu">
    <div class="widget-wrap">
      <div class="menu-main-menu-container">
        <ul id="menu-main-menu" class="menu">
          <li id="menu-item-210" class="nav-sidebar menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item menu-item-210 active "><a href="http://localhost/graham-every/" itemprop="url">Graham Every Ltd</a>
          </li>
        </ul>
      </div>
    </div>
  </section>
</aside>

＆＃13;

Answer 1

我的理解是，您想要突出显示具有＆＃34; current-menu-item＆＃34;的ID。所以当前页面链接突出显示。为了做到这一点，请在下面写下你的css。

    .sidebar .menu li.current-menu-item
    {
    Your CSS here followed by !important without space (e.g. font-weight:600!important)
    }

试试这个

此致 Manoj Soni

在Wordpress菜单

1 个答案: