Skip to content

Instantly share code, notes, and snippets.

@knoonrx
Last active January 7, 2016 02:01
Show Gist options
  • Save knoonrx/c91864f5c8a37680b92c to your computer and use it in GitHub Desktop.
Save knoonrx/c91864f5c8a37680b92c to your computer and use it in GitHub Desktop.
Bootstrap 3 double line
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="collapse navbar-collapse col-lg-6 col-md-6">
<ul class="nav navbar-nav nav-logo navbar-left">
<li><a href="#"><img src="<?= bloginfo( 'template_url' ) ?>/images/favicon.png"></a></li>
</ul>
</div>
<div class="collapse navbar-collapse navbar-right col-lg-6 col-md-6">
<div class="dropdown">
<button id="userMenu" class="btn dropdown-toggle btn-primary" type="button" data-toggle="dropdown">
<span>username@domainName.com </span><span class="caret userButton"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="userMenu">
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">View Details</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Edit</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Logout</a></li>
</ul>
</div>
</div>
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#mainNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-4 col-sm-10 col-sm-offset-2">
<div class="collapse navbar-collapse" id="mainNav">
<ul id="navlist" class="nav nav-justified">
<li><a href="#">Reports</a></li>
<li><a href="#">Account </a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
</div>
</div>
</div>
.demorow{
background-color:gray;
padding:10px;
border:1px solid black;
}
/*Adding padding to content for a fixed navbar*/
body {
padding-top: 110px;
}
/*Adding padding to content for a fixed navbar when nav items are collapsed*/
@media screen and (max-width: 768px) {
body { padding-top: 40px; }
}
/* Make dropdown menu items the same width as the dropdown wrapper*/
.dropdown{
width:100%;
}
.dropdown-menu{
width:100%;
}
/* left alight dropdown text*/
.dropdown-menu > li {
text-align:left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment