After spending some time working on a simple navbar with CSS styling, I encountered an issue when viewing it in mobile mode. The navbar did not expand to 100% of the screen width and had a margin of about 20px on both sides.
CSS
.navbar .brand {
width:150px;;
}
.nav-collapse > ul >li{
padding-top:50px;
}
html, body {
margin:0px;!important
padding:0px;!important
}
.nav .active a { background:#06F!important;
color:white!important;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
margin-top: 20px;
margin-bottom: -90px;
}
.navbar-wrapper .navbar {
}
/* Remove border and change up box shadow for more contrast */
.navbar .navbar-inner {
border: 0;
}
/* Downsize the brand/project name a bit */
.navbar .brand {
padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
font-size: 16px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
width:150px;
}
/* Navbar links: increase padding for taller navbar */
.navbar .nav > li > a {
padding: 18px 20px;
}
/* Offset the responsive button for proper vertical alignment */
.navbar .btn-navbar {
margin-top: 10px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 979px) {
.container.navbar-wrapper {
margin-bottom: 0;
width: auto;
}
.navbar-inner {
margin: 0px 0px -20px 0;
}
}
@media (max-width: 767px) {
.navbar {
width:100%;
}
.navbar .navbar-inner {
width:100%;
margin-right:0px;
margin-left:0px;
}
.navbar-inner {
margin: 0px 0px -20px 0;
}
}
HTML
<div class="navbar">
<div class="navbar-inner btn-block">
<div class="container">
<button type="button" 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>
</button>
<a class="brand" href="#">MOBILE</a>
<div class="nav-collapse collapse text-center">
<ul class="nav pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--container END-->
</div>
</div>
SCRIPT
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="docs/assets/js/jquery.js"></script>
<script src="docs/assets/js/bootstrap.js"></script>
<script src="docs/assets/js/bootstrap.min.js"></script>
<script src="docs/assets/js/holder/holder.js"></script>
<script src="docs/assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/application.js"></script>