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

Answer 2

select * from (select id from student where id >= 3 order by id limit 2) new order by new.id desc

Answer 3

尝试这样的事情：

.className li:hover{
 //set background color for li here.
 //background-color: #fff;
 }

.className li:hover > a{
 //set color for the text here.
 //you can set the color of text like here.
 color: #000 !important; //you can use any color, just use !important keyword for replacing inherited colors.
 }

//抱歉，我没有足够的评论声誉。

Answer 4

不要改变li本身。

使用此选择器

.navbar-nav > li > a { background: white; }

白色背景是一个样本

对于有效，只需添加：如此活动

.navbar-nav > li > a:active { background: white; }

如果仍无法正常工作，您还可以添加重要内容

.navbar-nav > li > a:active { background: white!important; }

Answer 5

您网站中的菜单项目前的CSS没有问题。您遇到的问题是由您的导航标记引起的。具体看一下style.css中的这行代码：

#nav {
    background: #c42027;
    border: none;
    box-shadow: none;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: -20px;
}

margin-bottom规则正在导航元素后面的div上升并覆盖列表项，从而阻止它们使用悬停。将#nav margin-bottom更改为0，问题将得到解决。

Wordpress更改活动和悬停li的颜色背景

5 个答案: