i am trying to create a nav bar by using bootstrap but when I redirect active class to dropdown menu, all the sub menus receive active class. I only want Project section to use active class
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Project <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>AAAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
</ul>
</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</nav>
You need to use .navbar-default .navbar-nav>.active>a { //styles here for active li } to target the active <li> only, like this:
.dropdown-menu {
display: block !important;
}
.navbar-default .navbar-nav>.active>a {
color: blue !important;
background: red !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li>About
</li>
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Project <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>AAAA
</li>
<li>BBB
</li>
<li>CCC
</li>
<li>DDD
</li>
</ul>
</li>
<li>Team
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
Since I can't see the css code... you need to add an > between li and ul
li > ul
Related
I make two navbars but it doesnt work correctly. Do you have any advices ? It looks like this, but after minimizing I am missing HOME MIBs and LIBRARY tabs. I think that upper menu covers bottom menu.
I would like to be able to see all tabs after clicking on the menu button.
Here is my code
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<!DOCTYPE html>
<html lang="en">
<head>
<title>my site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
padding-top: 50px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<div class="navbar-header"><a class="navbar-brand" href="#">LOGO</a></div>
<button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>Friends</li>
<li>Messages</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Account <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Stats</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">MIB's <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>my MIB's</li>
<li>my feedback's</li>
<li>my comment's</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Library <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Standard</li>
<li>Random</li>
<li>Custom</li>
</ul>
</li>
<li>Badges</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Help <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>my site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
padding-top: 50px;
}
#media only screen and (max-width: 550px) {
body {
padding-top: 0px;
}
.navbar-fixed-top {position:static;}
.navbar{margin-bottom:0;}
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<div class="navbar-header"><a class="navbar-brand" href="#">LOGO</a></div>
<button class="navbar-toggle" type="button" data-target=".navbar-collapse1" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-collapse1">
<ul class="nav navbar-nav pull-right">
<li>Friends</li>
<li>Messages</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Account <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Stats</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-target=".navbar-collapse2" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-collapse2">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">MIB's <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>my MIB's</li>
<li>my feedback's</li>
<li>my comment's</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Library <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Standard</li>
<li>Random</li>
<li>Custom</li>
</ul>
</li>
<li>Badges</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Help <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Use this. it is working perfact
I'm making an application with bootstrap and I have a nav bar, however for some reason when I resize the page the links disappear but the toggle button doesn't show.
Here is my nav bar:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">title</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
</nav>
Any help to fix this would be greatly appreciated.
You don't currently have the toggle button in your code. Try placing the following before your collapse, and after your navbar-header:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
you havent added a toggle button as i can see in your code
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">title</div>
</div>
For more details refer Navbar documentation (bootstrap)
in my case I am using bootstrap5 but class I was using old version, after changing code as below it worked for me by going though BS5 W2Schools:
<nav class="navbar navbar-expand-sm bg-dark">
<div class="container-fluid">
Recipe Book
<ul class="nav navbar-nav">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/recipes">Recipes</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/shopping-list">Shopping List</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item dropdown" appDropdown>
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Manage<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Save Data</a></li>
<li><a class="dropdown-item" href="#">Fetch Data</a></li>
</ul>
</li>
</ul>
</div>
</nav>
referece:https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_navbar_dropdown&stacked=h
I am currently redesigning a website who has a two row responsive navbar , but now get stuck.
#media (min-width: 767px) {
.nav.navbar-nav {
float: right;
}
}
<div class="navbar navbar-default navbar-fixed-top">
<div class="collapse navbar-collapse ">
<ul class="nav navbar-nav">
<li class="community"><strong>Community</strong></li>
<li class="global"><strong>Global</strong></li>
</ul>
</div>
<div class="navbar-header">
<div id="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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<a class="brand" href="#"><img src="IMAGE/Oppo_green.png" height="24" width="150" alt=""></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><strong>Home</strong></li>
<li class="dropdown">
<strong>Products</strong>
<ul class="dropdown-menu">
<li>Smartphones</li>
<li>Accessoires</li>
</ul>
</li>
<li><strong>ColorOS</strong></li>
<li class="dropdown">
<strong>About</strong>
<ul class="dropdown-menu">
<li>Press</li>
</ul>
</li>
<li class="dropdown">
<strong>Support</strong>
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
<li><strong>Stores</strong></li>
</ul>
</div>
</div>
If the screen is wider than 767px it looks like this (which looks precisely what I want (check first image)...but..
when the screen is smaller than 767px (second image), the navigation menu looks like this and that is not what I want. "Community" and "global" should be displayed below under store, but how can I fix that
I would just add duplicate menu options, meaning hide the first one on tablet/phone and show the second one on tablet/phone, as so: (check bottom of second navigation for adjustment)
<div class="navbar navbar-default navbar-fixed-top">
<!-- hide this nav on tablet/phone ****************************** -->
<div class="collapse navbar-collapse hidden-sm hidden-xs">
<ul class="nav navbar-nav">
<li class="community"><strong>Community</strong></li>
<li class="global"><strong>Global</strong></li>
</ul>
</div>
<div class="navbar-header">
<div id="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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<a class="brand" href="#"><img src="IMAGE/Oppo_green.png" height="24" width="150" alt=""></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><strong>Home</strong></li>
<li class="dropdown">
<strong>Products</strong>
<ul class="dropdown-menu">
<li>Smartphones</li>
<li>Accessoires</li>
</ul>
</li>
<li><strong>ColorOS</strong></li>
<li class="dropdown">
<strong>About</strong>
<ul class="dropdown-menu">
<li>Press</li>
</ul>
</li>
<li class="dropdown">
<strong>Support</strong>
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
<li><strong>Stores</strong></li>
<!-- ****************************************************** -->
<li class="visible-sm visible-xs">
<!-- link here (or dropdown) for "Community" -->
</li>
<li class="visible-sm visible-xs">
<!-- link here (or dropdown) for "Global" -->
</li>
</ul>
</div>
</div>
For some reason I cannot get the navbar to change. I tried to make it transparent. I know bootstrap navbar is normally an image so I included background-image: none.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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>
</button>
<a class="navbar-brand page-scroll" href="#intro">Eric West</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#projects">Projects</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
CSS:
navbar {
background-color: transparent;
background: transparent;
background-image: none;
}
Don't remove .navbar-inverse (or .navbar-default) unless you plan on adding some custom CSS to make up for it because these add properties to the nav, in particular to the navbar-toggle class.
Without one of those you'll remove alot of CSS from your nav and the navbar-toggle will not be visible on a device under 768px, it will be there and actionable but you won't be able to see it.
I would add a custom nav class and use that to override the property you need to change.
See example with that includes one with and one without the additional property.
body,
html {
background: grey;
margin-top: 50px;
}
.navbar.navbar-custom {
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-custom navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-1"> <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="#intro">Custom Navbar</a>
</div>
<div class="collapse navbar-collapse navbar-1">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#about">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a class="page-scroll" href="#projects">Projects</a>
</li>
<li> <a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-2"> <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="#intro">Navbar Only</a>
</div>
<div class="collapse navbar-collapse navbar-2">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#about">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a class="page-scroll" href="#projects">Projects</a>
</li>
<li> <a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Not sure if it is a typo on your end, but you need to add a . to target the navbar class in css like so:
.navbar {
background-color: transparent;
background: transparent;
background-image: none;
}
As mentioned by #Benya16, the navbar-inverse class modifies the base attributes of the navbar, you can read about that in the docs here. If you remove that bootstrap attribute it will be the bootstrap default.
Bootstraps Navbar is defined by its CSS file. To change the color, simply do.navbar-default:background-color: transparent !important although !important is not best practise, you can always change the color in the Bootstrap.css file.
Bootstrap.css - line 4594 to find the .navbar-inverse background color.
do ctrl-f and type navbar-defualt to find that one too.
I'm working on my first bootstrap project, I'm having some difficulty making changes to the navbar, I've spent a few hours researching but I keep coming up blank on one item in particular. When clicked the list item that is circled in the below image turns the standard bootstrap grey, I want it to match the background color, black.
And while I'm asking I would also like to change the color on the dropdown as well.
Here is my markup :
<nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle btn-lg">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img alt="brand" class="image-responsive" src="traclogo.png" height="140px" width="260px"></img>
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Products<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Suspension Kits</li>
<li>Light Bar Mounts</li>
<li>Custom Fabrication</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Builds<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Tacoma</li>
<li>Bronco</li>
<li>Hot Rods</li>
<li>Everything Else</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
You would want to change the tab color on focus. The dropdown style is controlled .dropdown-menu class and its descendent classes.
.navbar-default .navbar-nav > .open > a:focus {
background: #000 !important; /* Avoid !important, added for the sake of SO snippet priority */
color: #fff !important;
}
.dropdown-menu {
background: lightblue !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle btn-lg">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img alt="brand" class="image-responsive" src="traclogo.png" height="140px" width="260px">
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Products<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Suspension Kits
</li>
<li>Light Bar Mounts
</li>
<li>Custom Fabrication
</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Builds<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Tacoma
</li>
<li>Bronco
</li>
<li>Hot Rods
</li>
<li>Everything Else
</li>
</ul>
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</nav>