Bootstrap 3: Is there a way to hide navigation text when using small screens?

Question

I am using bootstrap 3.1.1.

I want the navigation text to disappear on smaller screens. Currently, it looks incoherent on small screens. Preferably, he would just go to smaller screens, but as an alternative, he might look good under the heading.

<div class="navbar navbar-inverse"> <div class="container"> <div class="navbar-brand">Brand</div> <p class="navbar-text">I want this text to disappear when screen is small</p> <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse navHeaderCollapse"> <u1 class="nav navbar-nav"> <li class="active"><a href="#">Index</a></li> <li><a href="link1.htm">Link 1</a></li> </u1> </div> </div> </div> 

http://www.bootply.com/120371

Answer 1

I would advise taking a look at the Bootstrap 3 documentation - (responsive utilities) .

Classes exist, such as hidden-xs , that can be used to hide elements for certain media queries. For example, hidden-xs will hide the element when the screen is less than 768 px.

UPDATED EXAMPLE HERE

 <div class="navbar navbar-inverse"> <div class="container"> <div class="navbar-brand">Brand</div> <p class="navbar-text hidden-xs">I want this text to disappear when screen is small</p> <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse navHeaderCollapse"> <u1 class="nav navbar-nav"> <li class="active"><a href="#">Index</a></li> <li><a href="link1.htm">Link 1</a></li> </u1> </div> </div> </div> 

You can also use the visible-md / visible-lg combination to hide the item when the screen is less than or equal to 992 px.

Answer 2

The bit was late, but this code was used on my site: the logo collides with the elements of the navigator (oh, product, etc.)

 <a href="Index.html" class="navbar-brand hidden-xs hidden-md hidden-sm"><span style="color:red">UNITED</span> STATES OF AMERICA</a> <a href="Index.html" class="navbar-brand visible-xs visible-md visible-sm"><span style="color:red">U</span>SA</a> 

therefore the brand ships from the USA (responsive / resized) to the USA

Answer 3

Alternatively, if these helper classes do not work for you (which means they are not hiding from the screen size you like), if you include a custom stylesheet, you can include your own media queries to hide just the elements, which you want.