Mobile responsive dropdown not moving content properly? - html

Question

I used bootstrap header,when it collapse changed to dropdown it moves the below content down, the image moves properly but the text on the image not moving down properly
Image moves down on dropdown but the text remains constant,i need to overlay or move the content down
my html code is:
<nav class="navbar navbar-inverse">
<div class="container-fluid" id="container">
<div class="navbar-header" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar" style="background: black !important;"></span>
<span class="icon-bar" style="background: black !important;"></span>
<span class="icon-bar" style="background: black !important;"></span>
</button>
<img src="./assets/logo.png" class="logo" >
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>About</li>
<li class="dropdown">
<a class="dropdown-toggle head-link" data-toggle="dropdown" href="#">Academic <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="head-link" href="#">Page 1-1</a></li>
<li><a class="head-link" href="#">Page 1-2</a></li>
<li><a class="head-link" href="#">Page 1-3</a></li>
</ul>
</li>
<li><a class="head-link" href="#">Locations</a></li>
<li><a class="head-link" href="#">Solutions</a></li>
<li><a class="head-link" href="#">Resources</a></li>
<button class="sigin-btn">Signup</button>
</ul>
</div>
</div>
</nav>
<div class="container">
<img src="./assets/Banner.jpg" class="banner">
<span class="cont-line1">Out of focus-</span>
<span class="cont-line2">Achieve with us</span>
</div>

Answer 1

Put this custom css on you .dropdown-item
If u already have some properties , You can manage it
.dropdown-item {
display: block;
max-width: 100%;
padding:0;
clear: both;
font-weight: 400;
color: #212529;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}
And Add this css on your css file
.navbar-collapse {
max-height: calc(100vh - 60px);
overflow-y: auto;
}
Then it will be fine ...
Hope this works for you