Bootstrap - My mobile toggle button appears in all viewports? - html

Question

I have been watching tutorials on creating a responsive navbar and one thing I am trying to create is a responsive menu button. I have created the button as you can see here:
http://jsfiddle.net/nickmadd/LvhCh/4/
The HTML
<nav class="navbar navbar-default affix-top nav-links" data-spy="affix" data-offset-top="100" role="navigation">
<div class="container">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<div class="navbar-header"> <a class="navbar-brand" href="/"><img src="media/img/nav-logo.png" alt="Driven Car Sales Logo" class="img-rounded logo-nav navbar-brand" /></a>
</div>
<div class="nav-collapse navbar-responsive-collapse" data-toggle="collapse" data-target=".navbar-nav">
<ul class="nav navbar-nav">
<li>Used Cars
</li>
<li>Get Finance
</li>
<li class="dropdown">About Driven<strong class="caret"></strong>
<ul class="dropdown-menu">
<li> <a href "#">The Team</a>
</li>
<li> <a href "#">Our Partners</a>
</li>
</ul>
<!--Drop Down End-->
</li>
<li>How To Find Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</nav>
The CSS
.navbar-toggle {
display: block;
}
.logo-nav {
height: 2.3em;
width: auto;
}
.brand {
font-size: 2em;
margin: 20px 0 25px;
}
.navbar-brand {
opacity: 0;
color: #ff0066;
-webkit-transition:opacity 0.3s ease-in;
-moz-transition:opacity 0.3s ease-in;
-o-transition:opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
margin-left: 0px;
}
.navbar {
border-radius: 0px;
border-left: none;
border-right: none;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar- default .navbar-nav>.open>a:focus {
color: #fff;
background-color: #DD3B4D;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
color: #fff;
}
.dropdown-menu {
color: #fff;
background-color: #DD3B4D;
}
.dropdown-menu>li>a {
color: #fff;
}
nav.affix {
top: 0;
width: 100%;
z-index: 1000;
}
nav.affix .navbar-brand {
opacity: 1;
height: 2.3em;
width: auto;
}
.navbar-header {
width: 0px;
-webkit-transition:width .4s ease-in-out;
-moz-transition:width .4s ease-in-out;
-o-transition:width .4s ease-in-out;
transition:width .4s ease-in-out;
margin: 0 1em 0 1em
}
nav.affix .navbar-header {
width: 8em;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-o-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
margin: 0 1em 0 0;
}
.nav-links {
font: 600 15px/1.5'Arimo';
}
.navbar-nav > li:last-child {
border-right: 1px solid #475d88;
}
ul.nav a:hover {
color: #fff !important;
background-color: #DD3B4D !important;
-webkit-transition: background-color 0.6s ease;
-moz-transition: background-color 0.6s ease;
-o-transition: background-color 0.6s ease;
transition: background-color 0.6s ease;
}
nav.affix .navbar-brand {
display: inline-block;
}
The issue is that when it opens in the browser it is still there even in a large viewpoint. I need it to appear when it get's towards mobile size. I could go and do this with media queries but I'm sure that bootstrap is meant to do this for you?
Am I missing something?

Answer 1

It's because you are overriding the Bootstrap css with your own css, at the very top of your css you have:
.navbar-toggle {
display: block;
}
which tells ".navbar-toggle" to always show. Remove this and it will show/hide correctly. Also these docs might be useful if you have any more trouble.
Update
Updated fiddle with correct syntax. The main issue was that you had .nav-collapse instead of .navbar-collapse.

Answer 2

You are missing the hidden class which is a large part of bootstrap's responsiveness on different viewport sizes. Check out this bootply
Your button works fine when you make it hidden on large and medium viewports:
<button class="navbar-toggle hidden-md hidden-lg" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
Read about the sizes and hiding here. You can add that class to everything in bootstrap, so move it around if you want to hide more or less.