bootstrap navbar collapse working on computer not on iphone - html

Question

My fixed navbar works fine when I resize my computer screen to below 980px. Once my screen is 979px or less the navbar collapse kicks in and works perfectly.
However, when I push code up to Heroku and load the site on my iPhone 4S, not only does my navbar not collapse, but it looks a bit different -- the float right drops underneath the logo causing it to look weird.
Here is my custom.css.scss file:
#import "bootstrap";
#import "bootstrap-responsive";
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 61px;
}
#media (max-width: 979px) and (min-width: 768px) {
body {
padding-top: 0;
}
}
#media (max-width: 768px) {
body {
padding-top: 0;
}
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
.container {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
max-width: 1000px;
}
.span4 {
width: 323px;
margin-left: 20px;
text-align: center;
}
#media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: -20px;
padding-right: -20px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.7em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $grayLight;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
font-size: 1.7em;
color: #555555;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 5px;
font-weight: bold;
line-height: 2;
}
#logo:hover {
text-decoration: none;
}
.navbar-inner {
min-height: 60px;
}
.navbar .nav {
margin: 0 -13px 0 0;
}
.navbar-fixed-top .navbar-inner {
box-shadow: none;
border-bottom: 1px solid #d4d4d4;
}
.navbar .btn-navbar {
margin-top: 16px;
}
li {
line-height: 40px;
list-style: none;
}
#smedia {
padding: 10px 9px 10px 0px;
font-size: 16px;
text-shadow: none;
}
.navbar .divider-vertical {
margin: 10px 9px;
border-left: 1px solid rgb(218,218,218);
}
And here is my header HTML:
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "Professional Workroom of Design", root_path, id: "logo" %>
<div class="nav-collapse collapse" style="height: 0px;">
<ul class="nav pull-right">
<li class="divider-vertical"></li>
<li>
<a href="#" id="smedia">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-linkedin icon-light" style="font-size: 22px;"></i>
</span>
</a>
</li>
<li>
<a href="#" id="smedia">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-google-plus icon-light" style="font-size: 22px;"></i>
</span>
</a>
</li>
<li>
<a href="#" id="smedia">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-twitter icon-light" style="font-size: 22px;"></i>
</span>
</a>
</li>
<li>
<a href="#" id="smedia">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-facebook icon-light" style="font-size: 22px;"></i>
</span>
</a>
</li>
<li class="divider-vertical"></li>
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "Portfolio", portfolio_path %></li>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact", contact_path %></li>
</ul>
</div>
</div>
</div>
</header>

Answer 1

Two things i would mention. Ensure you have the correcdt viewport set in the head of your html document
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
And secondly I noticed that you media queries are a bit scattered. It is best to keep these contained together and at the END of the document. If they are not at the end of the CSS then other CSS will overwrite it despite the media query.