Is there a way to make the background image of my navigation bar expand along with the menu when resizing the screen to mobile size and clicking on the hamburger menu?
It seems that if my navbar background is a color by default, it expands automatically.
.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>