0

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>

1 Answer 1

2

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

5
  • Bootstrap is still trying to collapse all of the buttons into that single mobile button. How would I stop that so that the CSS that you mentioned takes over?
    – Alan
    Jul 30, 2014 at 18:38
  • Do you have a fiddle that I can take a look at illustrating the problem?
    – Joel
    Jul 30, 2014 at 18:40
  • jsfiddle.net/D2RLR/6524 When re-sizing it, it still turns into the toggle drop down button as opposed to turning into the icons.
    – Alan
    Jul 30, 2014 at 20:37
  • @Alan Updated response
    – Joel
    Jul 30, 2014 at 22:09
  • There it goes! Thank you!
    – Alan
    Jul 30, 2014 at 22:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.