html - Bootstrap navbar with element on right and left side beside menu icon -


i'm trying build navbar bootstrap. navbar should have 2 elements:

  1. close-icon on left side of bar
  2. 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?

http://jsfiddle.net/kqemk0zk/

.label-cont{   position: absolute!important; /*important used example. overrated hierarchy*/   right: 60px; } 

Comments

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -