CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
JohanTG
JohanTG

Reputation: 1357

"icon-bar" in twitter bootstrap navigation bar

I cannot understand what the following code means in terms of icon-bar:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

What is icon-bar for? Why are there three similar instances of it?

This code is in the navigation bar section: 

<div class="navbar-header">
  ...
</div>

Upvotes: 99

Views: 103892

Answers (3)

lvarayut
lvarayut

Reputation: 15349

icon-bar is used for responsive layouts to create a button that looks like ≡ on narrow browser screens. You can resize your browser window (by making it narrow) to see how the navbar is replaced by that button.

The three span tags create three horizontal lines that look like a button, commonly known as the "burger" icon.

Take a look at icon-bar in bootstrap.css:

.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #cccccc;
  border-radius: 1px;
}

It is a block structure, so it is aligned line by line. The background-color is set to be gray80. Actually, you can change its width, height, background-color, etc. as you wish.

Upvotes: 133

NAND
NAND

Reputation: 130

the class="navbar-toggle" is used to get the styles.

data-toggle="collapse" attribute is used to control the show and hide.

the data-target = "#id" attribute is used to connect the button with the collapsible div

icon-bar is used o create a button with three horizontal lines. This button is displayed when the screen width is small

Upvotes: 3

streetlogics
streetlogics

Reputation: 4730

I expanded on the OP's answer since this came up during a different search, and I had to make a few modifications to actually get things working that I felt were worth sharing here. Putting it in it's own answer so that it gets proper code formatting.

I used this in a dropdown toggle button instead of navbar (same idea). Here's the code I used:

HTML:

          <div class="dropdown">
            <a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
              Menu
              <span class="icon-bars-button">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </span>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="reservations">Reservations</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="amenities">Amenities</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="accommodations">Accommodations</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="location">Location</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="packages">Packages</a></li>
            </ul>
          </div>

CSS:

.dropdown-toggle .icon-bars-button{
  display: inline-block;
  vertical-align:middle;
}
.dropdown-toggle .icon-bar {
  margin-bottom:2px;
  display: block;
  width: 22px;
  height: 2px;
  background-color: #cccccc;
  border-radius: 1px;
}

Upvotes: 7

Related Questions