[英]bootstrap4 navbar underline
please help... Underline in my navbar doesn't work.请帮助...我的导航栏中的下划线不起作用。 This is my HTML and css file: https://jsfiddle.net/57fd6yf5/1/ I wanted the cursor to active underline under menu, but not under logo.
这是我的 HTML 和 css 文件: https : //jsfiddle.net/57fd6yf5/1/我希望光标在菜单下激活下划线,但不在徽标下。 I guessing that the problem is in css file.
我猜问题出在 css 文件中。
HTML: HTML:
<nav class="navbar navbar-expand-md navbar-light bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">O MNIE</a>
</li>
<li class="nav-logo">
<a href="#"><img id="logo-navbar" src="images/logo.png" width="60px" height="60px"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">KONTAKT</a>
</li>
</ul>
</div>
</nav>
CSS: CSS:
.nav-link{
font-size: 20px;
}
.nav-item{
padding: 15px 30px;
}
.nav-logo{
padding: 10px 10px
}
.navbar-collapse {
justify-content: center;
}
.navbar-light .navbar-nav .active::after{
position: absolute;
bottom: -10px;
left: 0;
right: 0;
width: 100%
content: " ";
color: #F4C127;
border-bottom: 5px solid #F4C127;
}
.navbar-nav > li {
float: left;
position: relative;
}
For the border-bottom to be under the active link item, you would need the following css rule:要使边框底部位于活动链接项下,您需要以下 css 规则:
.navbar-light .navbar-nav .active>.nav-link {
border-bottom: 5px solid #F4C127;
}
However, if you want the border to be at the bottom of the entire navbar, then (as @ZimSystem pointed out) you need to add the missing ;
但是,如果您希望边框位于整个导航栏的底部,那么(正如@ZimSystem 指出的那样)您需要添加缺少的
;
to the width: 100%
part in your css rule.到
width: 100%
CSS 规则中的width: 100%
部分。
You should replace this css.你应该替换这个css。 Your class should be
.navbar-light .navbar-nav li.active
你的班级应该是
.navbar-light .navbar-nav li.active
.navbar-light .navbar-nav li.active::after{
position: absolute;
bottom: -10px;
left: 0;
right: 0;
width: 100%;
content: " ";
color: #F4C127;
border-bottom: 5px solid #F4C127;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.