Navigation bar background image does not expand when resized - html

Question

My navigation bar has an image background, and when I resize screen to the mobile size, when I press the hamburger menu, I want that background image to expand with the menu. Any suggestions how?
If my navbar background is color by default, it expands.
.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>

Answer 1

Donot restrict the height of the navbar at the start ,that is