After implementing a bootstrap header that collapses into a dropdown menu, I noticed that the content below it was being pushed down when the image moved properly but the text on the image did not. Even though the image moves correctly when the dropdown is activated, the text remains static and does not shift downward as well.
https://i.sstatic.net/ER6xf.png
https://i.sstatic.net/dRBzp.png
I need to either overlay the text or ensure that it moves down along with the image when the dropdown menu is triggered.
Below is my HTML code:
<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><a href="#" class="head-link">About</a></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>