CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapresponsive-design
Eldho George
Eldho George

Reputation: 89

how to create navbar like responsive tab using bootstrap?

how to create navbar like responsive tab using bootstrap? My requirement is to make tabs that should be responsive like a bootstrap navbar. I had try like this...

<nav class="navbar navbar-default">
      <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
            <span class="sr-only">Toggle</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

        </div>

        <div class="navbar-collapse in" id="bs-example-navbar-collapse-6" style="height: auto;">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div>
    </nav>

can anyone help....

Upvotes: 5

Views: 3835

Answers (3)

tvshajeer
tvshajeer

Reputation: 1329

I found one helpful plugin to do that you can try this responsive tabs

The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.

Upvotes: 2

Dwide Shrude
Dwide Shrude

Reputation: 13

Bootstrap uses media queries to change the header based on screen width, so you'll need to use them as well.

When the width is greater than 768px the list items are shown, and anything under that will cause them to be hidden.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <header>
    <div class="navbar-header">
      <a class="navbar-brand">Bootstrap</a>
      <div class="navbar-toggle"></div>
    </div>
    <nav class="navbar navbar-default">
    <ul>
      <li>About</li>
      <li>Services</li>
      <li>Contact</li>
      <li>Location</li>
    </ul>   
  </nav>
  </header>
</body>
</html>

CSS

@media (min-width: 768px) {
  .navbar li {
    float: left;
    list-style-type: none;
    display: block;
    padding: 15px 10px;
  }
  .navbar-toggle {
    display: none;
  }
  .navbar {
    display: block !important;
  }
}

.navbar-brand {
  display: block;
  float: left;
  background: #6f5499;
  padding: 15px;
}

.navbar-toggle {
  position: relative;
  float: right;
  background-color: #6f5499;
  padding: 20px;
}
.navbar {
  display: none;
}

See this jsbin.

Upvotes: 1

Ivan Venediktov
Ivan Venediktov

Reputation: 436

Try this:

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Bootstrap theme</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

Here is an example jsfiddle of how to create responsive menu in bootstrap.

Upvotes: 0

Related Questions