CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapnavbar
RC9
RC9

Reputation: 31

bootstrap navbar collapse is white when toggled

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?

Here's my codepen.

Upvotes: 1

Views: 1205

Answers (2)

Yuri
Yuri

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

Josh Crozier
Josh Crozier

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.

Updated Example

.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

Related Questions