Skip to content

Instantly share code, notes, and snippets.

@yozzi
Created September 16, 2015 18:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yozzi/93d4ea3a2696d00667bc to your computer and use it in GitHub Desktop.
Save yozzi/93d4ea3a2696d00667bc to your computer and use it in GitHub Desktop.
Non-collapsing navbar section
CSS
/* icon */ .custom-navbar .fa {font-size:25px}
@media (max-width:767px) {
.custom-navbar .navbar-right {
float: right;
padding-right: 15px;
}
.custom-navbar .nav.navbar-nav.navbar-right li {
float: right;
}
.custom-navbar .nav.navbar-nav.navbar-right li > a {
padding:8px 5px;
}
.custom-navbar .navbar-toggle {
float: left
}
.custom-navbar .navbar-header {
float: left;
width: auto!important;
}
.custom-navbar .navbar-collapse {
clear: both;
float: none;
}
}
PHP
<nav class="navbar navbar-inverse navbar-static-top custom-navbar" role="navigation">
<div class="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header">
<a class="navbar-brand" rel="home" href="#" title="Help">
Help ?
</a>
</div>
<!-- Non-collapsing right-side icons -->
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="fa fa-cog"></a>
</li>
<li>
<a href="#" class="fa fa-home"></a>
</li>
</ul>
<!-- the collapsing menu -->
<div class="collapse navbar-collapse navbar-left" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment