这是导航栏的桌面版
这是点击汉堡按钮后屏幕尺寸变为移动版本时的图像
我想当我点击汉堡包打开菜单时,但如果它没有被按下,它将在图像上打开。
.navbar-light .navbar-toggler {
outline: none !important;
padding-top: 8px;
padding-bottom: 2px;
z-index: 1001;
}
.navbar-toggler .navbar-toggler-icon {
background-color: black;
color: black;
height: 3px;
display: block;
margin-bottom: 6px;
}
<div class="container-fluid wow fadeIn">
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a class="navbar-brand wow fadeInLeft" href="#"><img src="img/logo.png" alt="logo" width="160px" height="60px"></a>
<button aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto wow fadeInRight">
<li class="nav-item active">
<a class="nav-link" href="#"><strong>HOME </strong><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><strong>ABOUT</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><strong>SERVICES</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><strong>PORTFOLIO</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><strong>CONTACT US</strong></a>
</li>
</ul>
</div>
</nav>
</div>
<header id="home-section" class="mb-3">
<img src="img/banner.jpg" alt="" width="100%">
</header>
我在哪里做错了?需要添加哪个 css 属性或 bootstrap 类?
您可以使用.navbar-fixed-top
class 将其固定在移动设备上
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句