html - Wordpress 改变 active 和 hover li 的颜色背景

Question

Navbar > li > a 在我的 wordpress 中不起作用。我尝试使用 #nav > li > a 更改其 li 的颜色和背景。
我的主要问题是我无法更改主页链接的事件类，有人可以发布有关如何更改它的示例吗？

代码在这里，非常感谢!

<nav class="navbar navbar-default" role="navigation" id="nav">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" 
                  data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="<?php echo home_url(); ?>">
              <img src="http://conlinscoffee.com/wp-content/uploads/2017/05/conlins_logo.png" 
                   class=" img-responsive" alt="logo">
          </a>
        </div>  
        <?php
        wp_nav_menu( array(
            'menu'              => 'primary',
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker())
            );
        ?>
        <div class="pull-right" id="searchbar">
            <?php dynamic_sidebar( 'top-menu' ); ?>
        </div>
    </div>
</nav>

Answer 1

您可以为此使用以下 CSS

#bs-example-navbar-collapse-1 li > a {
  // your css here
}


#bs-example-navbar-collapse-1 li:hover > a,
#bs-example-navbar-collapse-1 li.current_page_item > a {
  // your css here
}

或者你可以使用

#menu-main_menu > li > a {
    color: #fff;
}

#menu-main_menu > li:hover > a, 
#menu-main_menu > li.current_page_item > a {
    color: #c42027;
    background-color: #fff;
}