html - Bootstrap navbar with element on right and left side beside menu icon -
i'm trying build navbar bootstrap. navbar should have 2 elements:
- close-icon on left side of bar
- label element on right side of bar, should placed left menu-icon (which shown on small devices). if there no menu-icon, label element should on right side of bar
this tried far:
jsfiddle: http://jsfiddle.net/0jejx693/1/
<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <ul class="nav navbar-nav nav-pills navbar-right"> <li><a class="navbar-brand"><i class="fa fa-power-off"></i></a></li> <li> <a href="/link"> <span class="label"><i class="fa fa-commenting"></i> 10</span> </a> </li> </ul> </div> </div> </nav>
so result should this:
small
| [icon] [lable] [menu] |
big
| [icon] [lable] |
updated fiddle. hmm, sry cause deleted "label" class span, not showing "fa" icon. so, test. and, there's label left toggle-menu. think that's want, right?
.label-cont{ position: absolute!important; /*important used example. overrated hierarchy*/ right: 60px; }
Comments
Post a Comment