CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
Tom Brossman
Tom Brossman

Reputation: 143

How can I display text only on the collapsed navbar in Bootstrap?

I'd like to display a telephone number that appears on the navbar next to the navbar toggle button. The toggle button only appears once the navbar is in the collapsed state. I'd like the text to appear next to it.

Here's what I have now:

collapsed navbar

And here's what I am trying to achieve:

collapsed navbar with text

HTML from the relevant divs:

<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 don't want the text to appear unless the navbar is collapsed. How can this be achieved?

Upvotes: 4

Views: 13111

Answers (5)

David Sims
David Sims

Reputation: 21

I searched for the answer and this is what I did - replace Menu with your 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">

Upvotes: 1

MQ87
MQ87

Reputation: 1058

I'm adding this answer for users that want to use bootstrap way of handling collapsing element using the grid-float-breakpoint , that is the point at which the navbar becomes uncollapsed.

So if you want elements that is visible only when the bar is collapsed add the collapsed-addon class and include this css.

The default gird-float-breakpoint value is setted to screen-sm-min that is 768px

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

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

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

Upvotes: 1

Clarke Design
Clarke Design

Reputation: 73

Easy - just add the following HTML right before the 'hamburger button'

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

Then style it to suit.

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

Upvotes: 3

Akshaya Raghuvanshi
Akshaya Raghuvanshi

Reputation: 2277

There are too many ways to handle this situation.

  1. Display: none; It's a browser friendly, they no more assume any element because its in permanently hidden state.
  2. Visibility: hidden; it can hide any element on your document but still it has a limitation, browsers'll have to find that element on the page and then they hide that element. So for a few of few milliseconds but they have to work a bit to hide this.
  3. By keeping font-size: 0; and after collapsing state use font-size: 1em;.
  4. Keep opacity: 0 and later on opacity: 1.
  5. postion: absolute; left:-99999em; and and later left:0;
  6. You can use z-index if you have positioned element. Stacking the element in order also works.

So, finally there are a whole bunch of methods to hide and show elements on your document. It all depends on you whatever you choose. But according to me Display: none; is the best one for your project.

Upvotes: 1

Jefferson Henrique C. Soares
Jefferson Henrique C. Soares

Reputation: 968

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

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

Upvotes: 4

Related Questions