Only show link text when a bootstrap navbar is collapsed

Question

How do I show link text beside a link's icon/badge only when a navbar is collapsed?

Right now my bootstrap3 driven navbar uses only icons, when it is uncollapsed:

This is problematic when the navbar is collapsed:

... there is no descriptive text beside the links, but there is clearly room for it. The removal of text descriptions is for saving space, but once collapsed there is ample space... and it seems to be defective without descriptions, since so much real-estate is taken up.

I've looked through helper classes, and collapse functionality in the documentation, and tried to put <span class='collapse in'> tags in containing text, after the badge or glyphicon tags.

When I do that, the text is always visible, not only when the navbar is collapsed. I would prefer not to use class='visible-xs' or another class like it, based on actual browser width.

What is the correct way to detect an element is in a collapsed navbar and only show text in that case?

Here's a gist: https://gist.github.com/digitalextremist/6e70807a8b0e3c3da993

And bootply: http://www.bootply.com/105538

Answer 1

I have tried to do something similar with the .in class added by Bootstrap's Collapse plugin for jQuery, but it was not very reliable as the class would stay after the navbar would collapse and then uncollapse.

I recommend using CSS media queries instead. In Bootstrap 3's navbar.less file, 786px is used as the breakpoint for collapsing the navbar, so I would recommend using that in your CSS.

/* standard navbar */
@media (min-width: 768px) {
  ...
}

/* mobile navbar */
@media (max-width: 767px) {
  ...
}

Answer 2

Maybe I did not understand the question right, but isnt it as simple as use the hidden class?

<li class="hidden-xs"><a href="#">Action</a></li>

Answer 3

Going off @pungggi's answer:

Since bootstrap already has the media query breaks defined, there are helper responsive classes to show/hide things based on the same breaks that the grids use: hidden-(size) and visible-(size). This way, if you ever make your own less/sass based template, you don't have to change the @media-query parameters in multiple places. (see http://getbootstrap.com/css/#responsive-utilities-classes for more info)

So adding a span or p tag with the .visible-xs-inline class will ensure that the specified text is only shown when the screen is determined 'xs', which is used as the breaking point for collapsing the nav menu, and the -inline part will make sure it displays inline, since the .visible-xs will use display:block by default.

Code snippet:

    <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
            <a href="#" data-toggle="dropdown">
                <span class="fa fa-plus"></span>
                <!-- The following span will only show 
                     when the nav menu is collapsed -->
                <span class="visible-xs-inline">ADD SOMETHING BUTTON</span>
            </a>
             <!-- all the dropdown stuff -->
         </li>

         <li class="dropdown">
            <a href="#" data-toggle="dropdown">
                <span class="fa fa-compass" title="Energy Compass"></span>
                <span class="visible-xs-inline">ENERGY COMPASS</span>
            </a>
             <!-- all the dropdown stuff -->
         </li>
         <!-- continued list -->
    </ul>

Note: I recommend using a css padding/margin, or  's to ensure that the span text is properly padded but won't breakline.