Wordpress更改主动和悬停li的颜色背景
Navbar > li > a
在我的wordpress中不起作用。我试图用#nav > li > a
来更改其li
的颜色和背景。
而我的主要问题是我不能改变我的家庭链接的类活动,有人可以发表一个样本如何改变这个?Wordpress更改主动和悬停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>
您可以使用下面的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;
}
尝试这样的事:
.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.
}
//对不起,我没有足够的评价声誉。
不要改变李的本身。
使用此选择
.navbar-nav > li > a { background: white; }
白色背景是样品
对于活动,只需添加:活跃像这样
.navbar-nav > li > a:active { background: white; }
您还可以添加重要的是这样如果仍然不能正常工作
.navbar-nav > li > a:active { background: white!important; }
@法国此作品 –
当前的CSS在您的网站中的菜单项没有问题。 您遇到的问题是由您的导航标记导致的。具体看看这行代码在你的style.css:
#nav {
background: #c42027;
border: none;
box-shadow: none;
margin: 0 auto;
margin-top: 0px;
margin-bottom: -20px;
}
的边距规则导致资产净值元素后的股利的权利上去并覆盖列表项,从而防止它们工作与盘旋。将#nav margin-bottom更改为0,问题将得到解决。
我现在删除所有边距,因为我将删除我的旋转木马并将其更改为旋转木马插件以便于使用 – France
你可以发布一段HTML代码,它通过wordpress运行后实际生成了吗? – AnilRedshift
是的请,或者活的网站,我们可以检查那里的元素 –
我在现场运行这项工作,conlinscoffee.com我第一次创建了我自己的主题 – France