Menu
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....
876
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.
131
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.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
