“icon-bar” in twitter bootstrap navigation bar

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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)