Reputation: 31
I've got a semi-transparent navbar in bootstrap but when the screen size breaks down and goes to the "mobile" view when toggled it pushes the content down and leaves the top of the page with a white background.
Here's my code:
HTML
<nav class="navbar navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#AboutMe">About Us</a></li>
<li><a href="#Portfolio">Portfolio</a></li>
<li><a href="#ContactMe">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
CSS
.navbar-custom {
background-color: rgba(240, 240, 240, 0.3);
}
.navbar-custom .navbar-nav > li > a, .navbar-custom .navbar-brand {
color: black;
}
.navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus {
color: black;
background-color: rgba(240, 240, 240, 0.3);
}
@media only screen and (max-width: 766px) {
.collapsing, .in {
background-color:rgba(240, 240, 240, 0.3)!important;
}
.collapsing ul li a, .in ul li a {
color: black!important;
}
.collapsing ul li a:hover, .in ul li a:hover {
color: white!important;
}
}
.navbar-custom .navbar-toggle {
border-color:black;
}
.navbar-custom .icon-bar {
background-color:black;
}
I've tried altering the position
and z-index
but none of it seems to work and is there a simpler or different way to achieve what I've done?
Upvotes: 1
Views: 1205
Reputation: 3294
That happens because you set background-color: green
to #container1, so html and body will still have a white background-color.
Add to your css
html {background-color: green}
Upvotes: 1
Reputation: 241278
In your case, the green background is on the #container1
element. When the navigation menu collapses/expands on mobile devices, it pushes the #container1
element down (which means that the navigation menu no longer has a green background behind it).
I'd suggest absolutely positioning the navigation menu over the #container1
element, and then adding padding to account for the height of the menu.
.navbar-custom {
background-color: rgba(240, 240, 240, 0.3);
position: absolute;
top: 0;
right: 0;
left: 0;
}
Alternatively, you could avoid absolute positioning, and just set the background on the body
element (which will always be behind the navigation menu).
Upvotes: 0