I have an dropdown mega menu.It works fine as per our requirment.I would like to know how to open dropdown menu when I click on Menu instead of "hover".Please check the below code and advise how to do this.
<nav class="navbar navbar-expand-lg">
<div class="container"><img src="img/logo.png" alt="Obaju logo" class="d-none d-md-inline-block"><img src="img/logo-small.png" alt="Obaju logo" class="d-inline-block d-md-none"><span class="sr-only">Obaju - go to homepage</span>
<div class="navbar-buttons">
<button type="button" data-toggle="collapse" data-target="#navigation" class="btn btn-outline-secondary navbar-toggler"><span class="sr-only">Toggle navigation</span><i class="fa fa-align-justify"></i></button>
<button type="button" data-toggle="collapse" data-target="#search" class="btn btn-outline-secondary navbar-toggler"><span class="sr-only">Toggle search</span><i class="fa fa-search"></i></button><i class="fa fa-shopping-cart"></i>
</div>
<div id="navigation" class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">Home</li>
<li class="nav-item dropdown menu-large">Men<b class="caret"></b>
<ul class="dropdown-menu megamenu">
<li>
<div class="row">
<div class="col-md-6 col-lg-3">
<h5>Clothing</h5>
<ul class="list-unstyled mb-3">
<li class="nav-item">T-shirts</li>
<li class="nav-item">Shirts</li>
<li class="nav-item">Pants</li>
<li class="nav-item">Accessories</li>
</ul>
</div>
<div class="col-md-6 col-lg-3">
<h5>Shoes</h5>
<ul class="list-unstyled mb-3">
<li class="nav-item">Trainers</li>
<li class="nav-item">Sandals</li>
<li class="nav-item">Hiking shoes</li>
<li class="nav-item">Casual</li>
</ul>
</div>
Related
MY body just wont alight with the nav. there are some margins on the container, when I try to set up mx-0 the space just goes to the left. it is just no taking the whole with of the body. I am not sure what I am missing. I tried putting the nav inside the main container but still doesnt work.
[![<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
LightQUIZ
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse px-3 justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CATEGORIES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TOP QUIZES</a>
</li>
</ul>
<div class="d-flex flex-column flex-md-row align-items-start">
<form class="form-inline mx-lg-2 d-flex flex-row">
<input class="form-control px-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<button class="btn btn-success mx-md-2 my-sm-2 my-md-0">LOGIN</button>
<button class="btn btn-danger">SIGNUP</button>
</div>
</div>
</nav>
<main class="container">
<section class="home-header row pt-4">
<div class=" col-md-8 jumbotron">
<h2 class="display-5">Hello, world!</h2>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="col-md-4 d-flex flex-column">
<h4 class="text-center">LightQuiz LeaderBoard</h4>
<ul class="list-group leaderboard">
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-pill badge-danger">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
</ul>
</div>
</section>
</main>][1]][1]
The purpose of the container is so it will add space to either side in case the screen becomes too large in width. Try making your screen really small in width, then resize until it becomes large. It should have breakpoints where the spacing will change.
The nav element you have uses other classes that do not change the side spacing the same way as the container.
If you do not want space on either side of you main element, simply remove the container class.
If you want to make the navbar adopt the same side spacing as the main element, add the container class to the nav element.
Updated answer after reading your comment here:
Bootstrap also provides a "fluid" container class that makes it span "the entire width of the viewport". From the latest documentation for version 5:
<div class="container-fluid">
Simply, use class container-fluid instead of container on the main body.
Example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
LightQUIZ
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse px-3 justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CATEGORIES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TOP QUIZES</a>
</li>
</ul>
<div class="d-flex flex-column flex-md-row align-items-start">
<form class="form-inline mx-lg-2 d-flex flex-row">
<input class="form-control px-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<button class="btn btn-success mx-md-2 my-sm-2 my-md-0">LOGIN</button>
<button class="btn btn-danger">SIGNUP</button>
</div>
</div>
</nav>
<main class="container-fluid">
<section class="home-header row pt-4">
<div class=" col-md-8 jumbotron">
<h2 class="display-5">Hello, world!</h2>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="col-md-4 d-flex flex-column">
<h4 class="text-center">LightQuiz LeaderBoard</h4>
<ul class="list-group leaderboard">
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-pill badge-danger">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
ABC
<span class="badge badge-primary badge-pill">55</span>
</li>
</ul>
</div>
</section>
</main>
</body>
https://jsfiddle.net/mkpu9wcd/
For more info, read: https://getbootstrap.com/docs/5.0/layout/containers/
I've been searching for it all day and couldn't find a solution, so I hope I won't look like an idiot when in 2 minutes someone will post an answered link for the exact question.
I am trying to create a navbar like on steamdb
Where the search box remains after the navbar collapse and is just reduced in size.
But I ran into the problem where if I set the navbar to <nav class="navbar-expand-lg" </nav> then when it collapses it split into 3 lines, one for the brand, one for search, and one for toggle dropdown.
If I remove the "-lg" then it doesn't split, but then it also doesn't change the items to toggle.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/">My Company Name</a>
<form class="d-flex w-100 d-inline-block">
<div class="input-group">
<input class="form-control no-border" type="text" placeholder="search for game..." id="example-search-input">
<span class="input-group-append">
<button class="btn rounded-pill" type="button">
<i class="bi bi-search"></i>
</button>
</span>
</div>
</form>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
content
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="/test1">test1</a></li>
<li><a class="dropdown-item" href="/test2">test2</a></li>
<li><a class="dropdown-item" href="/test3">test3</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Donate</a>
</li>
</ul>
</div>
</div>
</nav>
https://www.codeply.com/p/uaWJpGVRED
Please help, I've been stuck on this all day
You need to use 2 inner divs inside the container. Make them both w-100, and the first one d-flex so that the brand and form layout horizontally...
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<div class="d-flex w-100">
<a class="navbar-brand" href="/">My Company Name</a>
<form class="d-flex w-100 d-inline-block">
<div class="input-group">
<input class="form-control no-border" type="text" placeholder="search for game..." id="example-search-input">
<span class="input-group-append">
<button class="btn rounded-pill" type="button">
<i class="bi bi-search"></i>
</button>
</span>
</div>
</form>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse w-100" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> content </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="/test1">test1</a></li>
<li><a class="dropdown-item" href="/test2">something</a></li>
<li><a class="dropdown-item" href="/test3">bla bla</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Donate</a>
</li>
</ul>
</div>
</div>
</nav>
Demo
This navigation bar uses Bootstrap 4. For medium screens (768px to 991px), I would like the search bar and button to be moved to the second line, as it is on large screens and above. Currently, on medium screens the search bar squishes up next to the other navigation links:
How it looks on large/extra large screens:
Updated code per first answer suggestion:
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-navbar">
<div class="container">
<a class="navbar-brand" href="/" style="align-children: middle">
<span class="" aria-hidden="true"></span>
Example
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#site-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="site-nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/agencies/">Agencies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/meetings/">Meetings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/agenda/">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/documents/">Documents</a>
</li>
</ul>
<form class="form-inline mt-3 mb-3" role="search" action="/search/" method="post">
<div class="btn-group">
<input type="text" name="request" class="form-control" placeholder="Search Documents">
<button type="submit" class="btn search-button">Search</button>
</div>
</form>
</div>
</div>
</nav>
You can use the responsive flexbox direction utils. For example, flex-column flex-xl-row on the navbar-collapse.
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="/" style="align-children: middle">
<span class="" aria-hidden="true"></span>
Example
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#site-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml-auto align-items-start align-items-xl-center flex-column flex-xl-row" id="site-nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/agencies/">Agencies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/meetings/">Meetings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/agenda/">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/documents/">Documents</a>
</li>
</ul>
<form class="form-inline ml-2" role="search" action="/search/" method="post">
<div class="form-group">
<input type="text" name="request" class="form-control" placeholder="Search Documents">
</div>
<button type="submit" class="btn search-button">Search</button>
</form>
</div>
</div>
</nav>
https://www.codeply.com/go/ZEyl77GzA8
Note: You're using navbar-expand-md so the Navbar will collapse into the toggler on sm. If you want to instead show the stacked menu/form on md you should reduce the navbar expand to sm.
Also see: Bootstrap 4 navbar with 2 rows
Put the contents of the search form in a btn-group, which should keep them together:
<form class="form-inline mt-3 mb-3" role="search" action="/search/" method="post">
<div class="btn-group" role="group" aria-label="Basic example">
<input type="text" name="request" class="form-control" placeholder="Search Documents">
<button type="submit" class="btn search-button">Search</button>
</div>
</form>
I am creating a angular 2 application using bootstrap. I want to have a navbar on my application so that app menu looks like
When viewed from smaller devices it should look as follows :
I have used following code in my html
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<button type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">COMPANY LOGO</a>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul *ngFor="let menu of menus;let first = first;" class="nav navbar-nav">
<li>
<a (click)="menuClicked(menu.categoryId)"
href='#/{{menu.categoryName}}'
style="color: #fff;font-size: 16px;font-weight:bold;cursor:pointer;">
{{menu.categoryName}}
</a>
</li>
</ul>
</div>
</div>
</nav>
Which gives me following output :
Can someone guide how to achieve desired output?
#Mandar Patil, I've linked to a codeply project that should meet your requirements.
For the brand on the collapsed navigation menu, you can just use bootstraps visible and hidden utility classes, and specify the appropriate breakpoints.
HTML
<div class="container hidden-xs visible-sm visible-md visible-lg">
<div class="row">
<div class="col-12">
<a class="navbar-brand" href="#">COMPANY LOGO</a>
</div>
</div>
</div>
...
<div class="navbar-header" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<button type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#" style="color: white;">COMPANY LOGO</a>
</div>
You can try For this:
<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>
<div class="col-md-12 clearfix">
<div class="row">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
</div>
</div>
<div class="col-md-12 clearfix">
<div class="row">
<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>
</div>
</div>
I am using multinavbar but when i see in mobile toggle and menu are not working
here's the code
<div class="navbar navbar-default navbar-static-top" role="navigation" style="height: 114px;margin-top: -51px;width: 1134px;margin-left: 143px;">
<div class="navbar-header" style=" margin-top: 29px;">
<div class="navbar-header"><a class="navbar-brand" href="#">News</a></div>
</div>
</div>
<div class="navbar navbar-default navbar-static-top" role="navigation" style="margin-top: -19px;width: 1134px;margin-left: 143px;height: 45px;"> <div class="navbar-header">
<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="#"></a>
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
NEWS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>MOVIE NEWS</li>
<li>OTHER NEWS</li>
</ul>
</li>
<li class="dropdown">
REVIEWS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>MOVIE REVIEWS</li>
<li>AUDIO REVIEWS</li>
</ul>
</li>
<li class="dropdown">
VIDEOS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>TRAILERS </li>
<li>POPULAR VIDEOS </li>
<li>Audio launch in US is a bad idea </li>
<li>SHORTS </li>
<li>OTHERS </li>
</ul>
</li>
<li>INTERVIEWS</li>
<li>KIDS</li>
</ul>
<div class="col-sm-3 col-md-3 pull-right" style="margin-top: -22px;">
<div class="navbar-text"></div>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Fixed navbar --><!--
<nav class="navbar navbar-default 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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
NEWS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>MOVIE NEWS</li>
<li>OTHER NEWS</li>
</ul>
</li>
<li class="dropdown">
REVIEWS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>MOVIE REVIEWS</li>
<li>AUDIO REVIEWS</li>
</ul>
</li>
<li class="dropdown">
VIDEOS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>TRAILERS </li>
<li>POPULAR VIDEOS </li>
<li>Audio launch in US is a bad idea </li>
<li>SHORTS </li>
<li>OTHERS </li>
</ul>
</li>
<li>INTERVIEWS</li>
<li>KIDS</li>
<li>LIFESTYLE</li>
<div class="input-group custom-search-form">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</ul> -->
</div>
</div><!--/.nav-collapse -->
</div>
</nav>
when i see in mobile it's not showing toggle and dropdown not working any help would be appreciated.
regards
Put your navbar in a div.container.
Then, you need to address the correct data-target with your toggle-button. in your case, it would be .navbar-collapse instead of #navbar (which doesn't even exists in your example, as far as i digged into it - there is one in the code you commented out though ;) )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header" style=" margin-top: 29px;">
<a class="navbar-brand" href="#">News</a>
</div>
</div>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" 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="#"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
NEWS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>MOVIE NEWS</li>
<li>OTHER NEWS</li>
</ul>
</li>
<li class="dropdown">
REVIEWS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>MOVIE REVIEWS</li>
<li>AUDIO REVIEWS</li>
</ul>
</li>
<li class="dropdown">
VIDEOS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>TRAILERS </li>
<li>POPULAR VIDEOS </li>
<li>Audio launch in US is a bad idea </li>
<li>SHORTS </li>
<li>OTHERS </li>
</ul>
</li>
<li>INTERVIEWS</li>
<li>KIDS</li>
</ul>
<div class="col-sm-3 col-md-3 pull-right" style="margin-top: -22px;">
<div class="navbar-text"></div>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
IMO, the "multi-navbar" is a bit useless. you could gladly merge then (put the header in the collapsable navbar instead of creating a seperate navbar just for the word...)
**DEMO **
This works fine..
<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">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">NEWS</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
NEWS <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>MOVIE NEWS</li>
<li>Other NEWS</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
REVIEWS <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>MOVIE REVIEWS</li>
<li>AUDIO REVIEWS</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
VIDEOS <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>TRAILERS </li>
<li>POPULAR VIDEOS </li>
<li>Audio launch in US is a bad idea </li>
<li>SHORTS </li>
<li>OTHERS </li>
</ul>
</li>
<li>INTERVIEWS</li>
<li>KIDS</li>
</ul>
</div>
</nav>