CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
Daniel Groppo
Daniel Groppo

Reputation: 59

With and Without Collapse Navbar Items of Bootstrap 3

I want to remain the "search" and "home" glyphicons at left side even the menu is collapse. I tried many ways to do, inclusive using the 'navbar-brand' class, but the glyphicons loses the menu link properties of navbar (size of text, colors when hover, etc).

This is the code of my menu currently:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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>
    <a class="navbar-brand" href="{{ URL::to('/') }}"></a>    
  </div>

  <!-- START TOGGLEABLE COMPONENTS -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-left">
      <li><a href="{{ URL::to('/') }}"><span class="glyphicon glyphicon-search"></span></a></li>
      <li><a href="{{ URL::to('/') }}"><span class="glyphicon glyphicon-home"></span></a></li>
      <li><a href="{{ URL::to('/') }}"> Coisas pra fazer</a></li>
      <li><a href="{{ URL::to('noticias') }}"> Comer & Beber</a></li>
      <li><a href="{{ URL::to('atuacao') }}"> Família</a></li>
      <li><a href="{{ URL::to('apoio') }}"> Vida Noturna</a></li>
      <li><a href="{{ URL::to('profissionais') }}"> Acomodações</a></li>
    </ul>
  </div>
  <!-- /.navbar-collapse -->
  </div>
</nav>

Upvotes: 1

Views: 671

Answers (1)

Gilad Eshkoli
Gilad Eshkoli

Reputation: 1253

If you want items in your navbar to appear even when menu is collapsed, don't put them in "collapse navbar-collapsed".

Try adding them strictly to navbar-header, right after your collapsed menu button.

Upvotes: 1

Related Questions