We Keep Coding

Change background color of collapse menu

I have dropdown menu on my website. Here is code
<nav class="navbar navbar-custom navbar-fixed-top top-nav-collapse" role="navigation">
<div class="container" style="height:80px;">
<div class="navbar-header" style="">
<button type="button" class="navbar-toggle glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<i class="fa fa-play-circle"><img style="width:100px;height:50px;" src="/img/logo10.png"></i>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse" >
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#about">О нас</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#Url.Action("Courses","Home")">Курсы</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#Url.Action("Development","Home")">Разработка</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="active">
<a class="page-scroll" href="#contact">Контакты</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="active">
<a class="page-scroll" href="#Url.Action("Index","Blog")">VR Блог</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Now it transparent. I try to change background to red.
Here is code of bootstrap css
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: red;
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
margin-bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background-color: red;
}
But it still left transparent. I don't understand where is problem?
How I can change background color of dropdown menu?

Please check it here: https://jsbin.com/hekaxexeki/edit?html,css,output
.navbar-collapse.collapse.in{
background-color:lightgreen;
}

Working snippet:
.navbar-nav > li {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: red;
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
margin-bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-custom navbar-fixed-top top-nav-collapse" role="navigation">
<div class="container" style="height:80px;">
<div class="navbar-header" style="">
<button type="button" class="navbar-toggle glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<i class="fa fa-play-circle"><img style="width:100px;height:50px;" src="/img/logo10.png"></i>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse" >
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#about">О нас</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#Url.Action("Courses","Home")">Курсы</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#Url.Action("Development","Home")">Разработка</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="active">
<a class="page-scroll" href="#contact">Контакты</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="active">
<a class="page-scroll" href="#Url.Action("Index","Blog")">VR Блог</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

You don't address any existing element with your selector. Try this:
.navbar-nav > li {
background-color: red;
}

All you need to do is writing this to your css that you created
.navbar{background-color : red;}

Dropdown menu on sidebar

I retrieved a code on Bootsnipp, which I try to adapt ...
I would like the menu present in the drop down to appear in the sidebar
How to do it?
The JsFiddle : https://jsfiddle.net/2hpxxpez/
HTML :
<header role="banner" class="navbar navbar-default">
<div class="container">
<button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle pull-left">
<i class="glyphicon glyphicon-menu-hamburger"></i>
</button>
<div class="side-collapse in">
<nav role="navigation" class="navbar-collapse">
<!-- <ul class="nav navbar-nav" >
<li>Home</li>
<li>Users</li>
<li>Places</li>
</ul> -->
<ul class="nav navbar-nav" >
<li class="dropdown">
<a><span class="caret"></span></a>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="container side-collapse-container">
<h1>Hello</h1>
<p>This is a side opening nav demonstration</p>
<p>Make your browser smaller and the top menu wil become into a lateral slider menu</p>
</div>
Javascript :
$(document).ready(function() {
var sideslider = $('[data-toggle=collapse-side]');
var sel = sideslider.attr('data-target');
var sel2 = sideslider.attr('data-target-2');
sideslider.click(function(event){
$(sel).toggleClass('in');
$(sel2).toggleClass('out');
});
});
I want this result :

i had created a fiddle for you hope it will help you click here you just need to toggle the class.
$('li.dropdown').click(function() {
$('li.dropdown').not(this).find('ul').hide();
$(this).find('ul').toggle();
});

$(document).ready(function() {
var sideslider = $('[data-toggle=collapse-side]');
var sel = sideslider.attr('data-target');
var sel2 = sideslider.attr('data-target-2');
sideslider.click(function(event){
$(sel).toggleClass('in');
$(sel2).toggleClass('out');
});
});
#media screen and (max-width: 768px) {
.side-collapse-container{
width:100%;
position:relative;
left:0;
transition:left .4s;
}
.side-collapse-container.out{
left:200px;
}
.dropdown-nave-block .dropdown-menu{ display: block !important;}
.side-collapse {
top:51px;
bottom:0;
left:0;
width:200px;
position:fixed;
overflow:hidden;
transition:width .4s;
background-color: #f8f8f8;
}
.side-collapse a {
border-bottom: 1px solid #e7e7e7;
}
.side-collapse.in {
width:0;
}
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<header role="banner" class="navbar navbar-default">
<div class="container">
<button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle pull-left">
<i class="glyphicon glyphicon-menu-hamburger"></i>
</button>
<div class="side-collapse in">
<nav role="navigation" class="navbar-collapse">
<ul class="nav navbar-nav" >
<li>Home</li>
<li>Users</li>
<li>Places</li>
</ul>
<ul class="nav navbar-nav" >
<li class="dropdown dropdown-nave-block open" >
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true" >Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="container side-collapse-container">
<h1>Hello</h1>
<p>This is a side opening nav demonstration</p>
<p>Make your browser smaller and the top menu wil become into a lateral slider menu</p>
</div>
i have change same html add dropdown class and
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>

Fixed Navigation bar on scroll

I can't seem to create a fixed Navigation bar on scroll. I've looked at some of the answers posted on here however I can't get it to work for my solution. THe problem I'm facing is that the nav bar does not scroll after the header. It stays in a fixed position below the header and does not move despite scrolling down. Any ideas?
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar").addClass("top-nav-collapse");
} else {
$(".navbar").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
position: relative
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
background-color: azure
}
.top-nav-collapse {
padding: 0;
}
}
<body id="home" data-spy="scroll" data-target=".navbar-default">
<!-- Header -->
<header id="top" class="header-Home">
<div class="text-vertical-center">
<!--<img src="img/logocrop2.svg" class="CenterScreen" style="display:inline"> -->
<div class="row">
<div class="col-sm-4 col-sm-push-4">
<h4>About</h4>
<h4>Services</h4>
<h4>Contact</h4>
</div>
</div>
</div>
</header>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#home">A&Co</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#home"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Scrolling Nav</h1>
<p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class and set the link target to a corresponding ID on the page.</p>
<a class="btn btn-default page-scroll" href="#contact">Click Me to Scroll Down!</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>About Section</h1>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Services Section</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Section</h1>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</body>
</html>
Screenshot 1
Screenshot 2

To keep the navigation bar in the same place as you scroll it's
position: fixed;
In the CSS for the nav that worked for me, but that not might be what you are after...

$(window).scroll(function(){
if($("body").scrollTop() > 100 || $("html").scrollTop() > 100) {
$(".navbar").addClass(".stop");
} else {
$(".navbar").removeClass(".stop");
}
});
enter code here
// css
.stop{
top: 0;
left: 0;
width: 100%;
padding: 0;
}
// html markup
<!-- Begin Navbar -->
<div class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<div class="logo">
<a class="navbar-brand" href="index.html">
<img src="images/Restaurant-logo.png" class="img-responsive" alt="Restaurant logo">
</a>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"><span class="inner"></span></span>
<span class="icon-bar"><span class="inner"></span></span>
<span class="icon-bar"><span class="inner"></span></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left ">
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li class="dropdown">
<button class="btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown" aria-expanded="false">
Reservation
</button>
<ul class="dropdown-menu dropdownhover-bottom" role="menu" aria-labelledby="dropdownMenu1">
<li>Reservation Table</li>
<li>Reservation Event</li>
</ul>
</li>
</ul>
<div class="logo">
<a href="index.html">
<img src="images/Restaurant-logo.png" class="img-responsive" alt="Restaurant logo">
</a>
</div>
<ul class="nav navbar-nav navbar-right ">
<li>Blog</li>
<li>Contact</li>
<li>Order No : (123) 234-8765</li>
</ul>
</div><!-- /collapse -->
</div><!-- /container -->
</div><!--/Navbar -->`enter code here`

Bootstrap menu bar using Google Translate CSS

I am having a css issue as the width of the screen gets smaller will someone please tell me how to adjust my menu bar. I am using the google translate in my menu bar but the problem I am having is when the screen is full size and as you start moving the screen in to make it smaller the google translate starts to drop down to another level making all other dropdowns on the menu bar not work properly because google translate interferes.
Is there a way to make google translate button stay inline or on the menu bar without dropping to another row?
Or even making the width of the google translate not as wide to see if it will stay on the same line?
Any help would be greatly appreciated!
http://jsfiddle.net/bobrierton/5c1vbo2s/11/
.goog-te-gadget .goog-te-combo {
margin: 0px 0px;
}
.goog-logo-link {
display:none !important;
}
.goog-te-gadget{
color: transparent !important;
font-size:0px;
}
.goog-te-combo {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color: #687074;
text-transform: uppercase;
cursor:pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!--=== Header v4 ===-->
<div class="header-v4">
<!-- Navbar -->
<div class="navbar navbar-default mega-menu" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="row">
<div class="col-md-7">
<a class="navbar-brand" href="index.html">
<img id="logo-header" src="assets/img/logo-header.png" alt="Logo">
<img id="logo-header" src="assets/img/logo-text.png" alt="Logo text">
</a>
</div>
<div class="col-md-5 header-right">
<div class="social margin-bottom-10">
<ul class="header-links list-inline">
<li>Apple Store</li>
<li>Google Play</li>
</ul>
<ul class="social-icons social-icons-color">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<button class="btn-u btn-u-lg" type="button"><i class="fa fa-cc-mastercard"></i> Pay Online</button>
<button class="btn-u btn-u-red btn-u-lg" type="button"><i class="fa fa-calendar"></i> Make An Appointment</button>
</div>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="full-width-menu">Menu Bar</span>
<span class="icon-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
</button>
</div>
</div>
<div class="clearfix"></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<div class="container">
<ul class="nav navbar-nav">
<!-- Home -->
<li class="active">
<a href="index.html" class="" data-toggle="">
Home
</a>
</li>
<!-- End Home -->
<!-- Driver License -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Driver License
</a>
<ul class="dropdown-menu">
<li class="">General Information</li>
<li>Online Services</li>
<li>Fees</li>
<li>Forms</li>
</ul>
</li>
<!-- End Pages -->
<!-- Motor Vehicles -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Motor Vehicle
</a>
<ul class="dropdown-menu">
<li class="">General Information</li>
<li>Online Services</li>
<li>Sales Tax</li>
<li>Fees</li>
<li>Forms</li>
<li>Title By Mail</li>
</ul>
</li>
<!-- End -->
<!-- Features -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Property Tax
</a>
<ul class="dropdown-menu">
<li class="">General Information</li>
<li>Lookup/Pay Online</li>
<li>Tax Certificates</li>
<li>Discount Periods</li>
<li>Instalment Options</li>
<li>Forms</li>
</ul>
</li>
<!-- End Features -->
<!-- TDT -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Tourist Tax
</a>
<ul class="dropdown-menu">
<li class="">General Information</li>
<li>Pay Online</li>
<li>Online Account Management</li>
<li>Collection Reports</li>
</ul>
</li>
<!-- Ens -->
<!-- Additional Services -->
<li class="dropdown">
<a href="full-width-page.html" class="dropdown-toggle" data-toggle="dropdown">
Additional Services
</a>
<ul class="dropdown-menu">
<li class="">Parking Permits</li>
<li>Hunting & Fishing</li>
</ul>
</li>
<!-- End -->
<!-- Contacts -->
<li class="">
<a href="contact.html" class="">
Contact Us
</a>
</li>
<!-- End Contacts -->
</ul>
<!-- Nav Bar Right Block -->
<ul class="nav navbar-nav navbar-border-bottom navbar-right">
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</ul>
<!-- End Nav Bar Right Block -->
</div><!--/end container-->
</div><!--/navbar-collapse-->
</div>
<!-- End Navbar -->
</div>
<!--=== End Header v4 ===-->

You can use white-space: nowrap BUT you will need to make sure that it fits in the different break points because, as you requested, it will no longer wrap to fit.
.header-links {
white-space: nowrap;
}
After adding this, simply use your media queries to make adjustments through your different breakpoints to get the look/style you desire. An example of using a media query that makes style adjustments UNDER 860px screen width would be:
#media only screen and (max-width: 859px) {
.header-links li {
padding-right: 2px;
padding-left: 2px;
}
.header-links a {
font-size: 13px;
}
}

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">Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
can anyone help....

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.

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.

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">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Here is an example jsfiddle of how to create responsive menu in bootstrap.