My fixed navigator works great when I resize my computer screen below 980 pixels. As soon as my screen is 979 pixels or less, the crafting of the narbana works and works fine.
However, when I push the code to Heroku and upload the site to my iPhone 4S, my navigation bar not only does not crash, but it looks a bit different - the float on the right falls under the logo, making it look strange.
Here is my custom.css.scss file:
@import "bootstrap"; @import "bootstrap-responsive"; 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; } } 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; } #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 HTML header:
<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>
source share