CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Alan
Alan

Reputation: 15

Bootstrap collapse icons

Is it possible to make Bootstrap change the navbar list from text to icons from the browser re-sizing instead of making it into a collapse drop down?

For example, make example 1 turn into example 2 just from the browser re-sizing.

Example 1:

  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>

Example 2:

  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
      <li><a href="#about"><span class="glyphicon glyphicon-info-sign"></a></li>
      <li><a href="#contact"><span class="glyphicon glyphicon-envelope"></a></li>
    </ul>

Upvotes: 0

Views: 127

Answers (1)

Joel
Joel

Reputation: 2257

Sure, add some css like this:

.nav .glyphicon {
        display: none;
    }
@media screen and (max-width: 300px){
    .nav .text {
        display: none;
    }
    .nav .glyphicon {
        display: inline;
    }
}

Then update your lis to have a span for both text and the icon:

<li>
    <a href="#"><span class="text">Home</span><span class="glyphicon glyphicon-home"></span></a>
</li>

The @media styles specify that when the screen width is 300px or less, then hide the text and show the icon. The icon is hidden by default.

EDIT: I've updated your fiddle to have the switch working. Here's what I did: http://jsfiddle.net/cPa6b/

  • Removed the button in your navbar header
  • Removed the collapse styles on your navbar div
  • Added 2 new styles in the media query to counteract bootstrap's style (also changed the max-width to 768 to match bootstrap's default):

.navbar-header, .navbar-nav, .navbar-nav > li { float: left; }

.navbar-nav { margin: 5px; }

You may also consider customizing the @grid-float-breakpoint variable in bootstrap as mentioned here http://getbootstrap.com/components/#navbar

Upvotes: 2

Related Questions