Geek Answers Handbook

How can I only display text on a minimized navigation bar in Bootstrap?

I want to display the phone number that appears in the navigation bar next to the navigator toggle button. The toggle button appears only after the navigation bar is folded. I would like the text to appear next to it.

Here is what I have now:

collapsed navbar

And here is what I am trying to achieve:

collapsed navbar with text

HTML from the relevant sections:

<div class="header-centered"><img src="http://placehold.it/350x150"></div> <div class="navbar"> <div class="navbar-inner"> <div class="container"> <!-- .btn-navbar is used as the toggle for collapsed navbar content --> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Everything you want hidden at 940px or less, place within here --> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a></li> <li><a href="#">Link5</a></li> </ul> </div> </div> </div> </div>

I do not want the text to appear if the navigation bar does not crash. How can this be achieved?

+4
source share
5 answers

You can control the visibility of your text using CSS, something like this:

 .abcde .text { display: none; } .abcde.collapse .text { display: inline-block; }
+3
source

Easy - just add the following HTML right in front of the hamburger button

 <p class="navbar-text visible-xs-inline-block">Menu</p>

Then create a style to match.

 p.navbar-text { font-size: 22px; margin-top: 8px; padding-bottom: 0; text-align: right; width: 70%; }
+3
source

There are too many ways to deal with this situation.

  • Display: none; This is a friendly browser, they no longer assume any element, because it is in a constantly hidden state.
  • Visibility: hidden; it can hide any element of your document, but it has a limitation, the browser will have to find this element on the page, and then it will hide this element. So, in a few milliseconds, but they need to work a bit to hide it.
  • Keeping font-size: 0; and after using the reset state font-size: 1em; .
  • Keep opacity: 0 and then opacity: 1 .
  • postion: absolute; left:-99999em; and then left:0;
  • You can use z-index if you placed an element. It also builds the item in order.

So finally, there is a whole bunch of methods to hide and show elements on your document. It all depends on you, no matter what you choose. But, in my opinion, Display: none; is the best for your project.

+1
source

I was looking for the answer, and this is what I did - replace the Menu with the desired text

 <div class="navbar-inner"> <div class="container-fluid"> <a class="btn btn-navbar btn-block" data-target=".navbar-inverse-collapse" data-toggle="collapse"> <span class="icon icon-white icon-align-justify"></span> MENU</a> <div class="nav-collapse collapse navbar-inverse-collapse"> <ul class="nav">
+1
source

I am adding this answer for users who want to use the bootstrap method to handle a collapsing element using a grid-float breakpoint, that is, the point at which the navigation bar becomes unmounted.

So, if you want the elements to be visible only when folding the line, add the sleeping addon class and enable this css.

The default gind-float-breakpoint is set to screen-sm-min, which is 768px

 @media (min-width: 768px){ .collapsed-addon { display: none; }

If you use some processors, use the css variable grid-float-breakpoint

 @media (min-width: $grid-float-breakpoint){ .collapsed-addon { display: none; } }
0
source

More articles:


All Articles