My Bootstrap 2.3.2 navigation bar is flawless on desktop, but I'm running into issues with the responsive navbar for tablets and mobile. The code I have is pretty standard:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<!-- dynamic code builds the menu here -->
</div>
</div>
</div>
</div>
To give it a unique look, I've tweaked the CSS:
.navbar {
font-family: 'Oswald', sans-serif;
font-size:13px;
font-weight: 200;
margin:10px 0 10px 0;
height:40px;
}
.navbar-inner, .navbar-inner .container {
background-color: #004080;
border-color: #6699cc;
background-image: none;
}
/* Additional CSS goes here */
The issue arises when collapsing the menu on smaller devices like tablets or phones - the content behind the navigation remains visible, making menu items hard to read. Any suggestions on how to make the menu non-transparent or push the content down? Check out the screenshots below: