CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Trevor
Trevor

Reputation: 5

Bootstrap navbar collapse is white/transparent when dropped down

I'm playing with the navbar in Bootstrap, in the hopes of making it a bit smaller than the standard version.

I'm not sure how I did it, but when the size of the screen drops down enough for the toggle menu button to appear, the background is white/transparent instead of the preferred blacker inverse color.

If you have a better way of making the navbar smaller, I'm open to suggestions.

Here's a link to the full code, but will include CSS here also: http://codepen.io/anon/pen/Qbgdbo

.navbar {
  height:32px !important; 
  min-height:32px !important; 
  margin:0px !important;
}
.navbar-brand {
  padding-top:0px !important; 
  padding-bottom:0px !important;
 }
.navbar-nav > li > a {
  padding-top:7px !important; 
  padding-bottom:7px !important;
}
.navbar-header{
  height:32px !important; 
  min-height:32px !important; 
  margin:0px !important;
}
.navbar-nav {
  display: inline-block; 
  float: none;
}
.navbar-collapse {
  text-align: center;
}
.navbar-toggle{
  margin:3px;
}
.socialIcons {
  max-width:40px;
}

Upvotes: 0

Views: 945

Answers (1)

AngularJR
AngularJR

Reputation: 2762

Trevor, If you add the navbar-inverse class to this area of your code it will work as you want it to. 

<div class="collapse navbar-inverse navbar-collapse">
    <ul class="nav navbar-nav">
        <li><a>About Us</a></li>
        <li><a>Join Us</a></li>
        <li><a>Our Mission</a></li>
        <li><a>KickStarter</a></li>
    </ul>

Upvotes: 1

Related Questions