btn-navbar never displays when screen width shrinks - html

Question

I'm trying to create a responsive nav-bar but for some reason the btn-bav bar never displays on the site when the navbar collpases here is my html code for the nav-bar
<div class="navbar navbar-fixed-top">
<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>
<a class="brand" href="index.html">Site Name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><i class="icon-home">Home</i></li>
<li><i class="icon-film">Film/TV</i></li>
<li><i class="icon-linux">Linux</i></li>
</ul>
<ul class="nav">
<li class="dropdown">
<i class="icon-terminal">Coding</i><b class="caret"></b>
<ul class="dropdown-menu">
<li>JavaScript/Jquery</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
</ul>
<form class="navbar-search">
<input type="text" class="search-query" placeholder="Search">
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div><!--/.end of navbar -->
Why is it that
<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>
doesn't display when the screen size shrinks below 940px.
Here is the realvent css
#media (max-width:979px) {
body {
padding-top:0;
}
.navbar-fixed-top {
position:static;
margin-bottom:18px;
}
.navbar-fixed-top .navbar-inner {
padding:5px;
}
.navbar .container {
width:auto;
padding:0;
}
.navbar .brand {
padding-left:10px;
padding-right:10px;
margin:0 0 0 -5px;
}
.navbar .nav-collapse {
clear:left;
}
.navbar .nav {
float:none;
margin:0 0 9px;
}
.navbar .nav>li {
float:none;
}
.navbar .nav>li>a {
margin-bottom:2px;
}
.navbar .nav>.divider-vertical {
display:none;
}
.navbar .nav .nav-header {
color:#999999;
text-shadow:none;
}
.navbar .nav>li>a,.navbar .dropdown-menu a {
padding:6px 15px;
font-weight:bold;
color:#999999;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.navbar .dropdown-menu li+li a {
margin-bottom:2px;
}
.navbar .nav>li>a:hover,.navbar .dropdown-menu a:hover {
background-color:#222222;
}
.navbar .dropdown-menu {
position:static;
top:auto;
left:auto;
float:none;
display:block;
max-width:none;
margin:0 15px;
padding:0;
background-color:transparent;
border:none;
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
.navbar .dropdown-menu:before,.navbar .dropdown-menu:after {
display:none;
}
.navbar .dropdown-menu .divider {
display:none;
}
.navbar-form,.navbar-search {
float:none;
padding:9px 15px;
margin:9px 0;
border-top:1px solid #222222;
border-bottom:1px solid #222222;
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);
}
.navbar .nav.pull-right {
float:none;
margin-left:0;
}
.navbar-static .navbar-inner {
padding-left:10px;
padding-right:10px;
}
.btn-navbar {
display:block;
}
.nav-collapse {
overflow:hidden;
height:0;
}
}
#media (min-width:980px) {
.nav-collapse.collapse {
height:auto !important;
overflow:visible !important;
}
}
Here is the jsfiddle
http://jsfiddle.net/hZktq/

Answer 1

The problem is somewhere on your css. I took your jsfiddle, deleted your css code and added the bootstrap cdn (https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css)
This is the result: http://jsfiddle.net/rCAQH/1/