I am working on creating a responsive navbar that displays as a traditional desktop menu and switches to a hamburger menu for mobile devices. However, I have encountered an issue with the hamburger menu overlapping part of the background image. I want the background image to always remain behind the hamburger menu. Below is the code I am using:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="col-interno"> <--col interno is for color-->
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" style="vertical-align:middle" class="navbar-left"><img src="css/logo.png" style="width:78px"></a>
<a href="#" class="navbar-brand">Generic Brand</a>
</div>
<!-- Menu Items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="chi-siamo.html">Who</a></li>
<li><a href="servizi.html">Services</a></li>
<li><a href="contatti.html">Contact Us</a></li>
</ul>
</div>
</div>
<div id="testata-back">
</div>
</nav>
<div class="testata-500-1 testata-servizi">
<div class="testata-500-logo-transparent">
<!-- These classes represent two images positioned below the hamburger menu ideally -->
</div>
</div>
</div>
[1
CSS
testata-500-1{margin:0 auto;height:500px;box-shadow:inset 0 -2px 3px 1px rgba(0,0,0,.4)}
Custom CSS
@media only screen and (min-width:1024px){.testata,.contents,#footer-bar,#credits-bar{width:960px}#hamburger{display:none}}@media only screen and (min-width:768px) and (max-width:1023px){.testata,.contents,#footer-bar,#credits-bar{width:740px}#logo{position:absolute;left:26px;top:65px;z-index:2000;width:150px;height:124px}.testata-500-1{height:250px;background-size:130%}.testata-500-logo-transparent{height:250px;background-size:155%}#testata-menu{top:10px}#hamburger{display:none}}