我的导航栏有一个图像背景,当我把屏幕调整到移动的大小时,当我按下汉堡菜单时,我希望背景图像随着菜单一起展开。
如果我的导航栏背景默认为彩色,它会展开。
.navbar {
background-image: url('/images/HEADER.png');
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
top: -10px!important;
height: 110px;
}
.navbar-toggler {
outline: none!important;
}
.nav-link {
color: black;
font-family: myriad-pro, sans-serif;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
line-height: 10px;
font-size: 0.8rem;
}
.nav-link:hover {
color: white;
}
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand ml-lg-5 pl-5" href="#"><img height=7 0px; class="img-responsive" src="images/logo.png" alt=""></a>
<button class="mb-2 navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<div id = "hamburger">
<div class = "one"></div>
<div class = "one"></div>
<div class = "one"></div>
</div>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto mr-5 pr-5">
<li class="nav-item active">
<a class="nav-link" href="#pagrindinis">Pagrindinis<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#paslaugos">Paslaugos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Atlikti Darbai</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#apie">Apie Mus</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#kontaktai">Kontaktai</a>
</li>
</ul>
</div>
</nav>
1条答案
按热度按时间6jygbczu1#
不要在开始时限制导航栏的高度,即