I have many navbars to collapse when toggled. Now it can only display part of the collapsed navbars. I need to scroll down for further navbars. Is there a way to let it display all navbars?
I tried to mess aroung with
.collapse{
height: 900px;
}
but it only decreases the number of navbars displayed, after it reached 900px, it can no longer display more.
<style>
.collapse{
height: 900px;
}
</style>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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>
<p class="navbar-brand">User</p>
</div>
<div class="collapse navbar-collapse" id = "myNavbar">
<ul class="nav navbar-nav">
<li ><span class="glyphicon glyphicon-pencil"></span> something</li>
<li ><span class="glyphicon glyphicon-heart"></span> something</li>
<li ><span class="glyphicon glyphicon-edit"></span> something</li>
<li ><span class="glyphicon glyphicon-upload"></span> something</li>
<li ><span class="glyphicon glyphicon-music"></span> something</li>
<li ><span class="glyphicon glyphicon-pawn"></span> something</li>
<li ><span class="glyphicon glyphicon-plus"></span> something</li>
<li class = "dropdown">
<a class = "dropdown-toggle" data-toggle = "dropdown" href="#"><span class="glyphicon glyphicon-th-list"></span> something<span class="caret"></span></a>
<ul class = "dropdown-menu">
<li ><span class="glyphicon glyphicon-pawn"></span> something</li>
<li ><span class="glyphicon glyphicon-pawn"></span> something</li>
<li ><span class="glyphicon glyphicon-pawn"></span> something</li>
<li ><span class="glyphicon glyphicon-pawn"></span> something</li>
<li ><span class="glyphicon glyphicon-pawn"></span> something</li>
<li ><span class="glyphicon glyphicon-search"></span> something</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class = "glyphicon glyphicon-log-out"></span> something</li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
Thanks
For .navbar-collapse, it defiend a max-height style.
set this one to your css
.navbar-collapse {max-height:none}
Demo Link
Related
I'm using bootstrap navigation, and it's working perfectly when collapsed in android and chrome.
But when I tested it on an iPhone the dropdown list appears much lower in the screen, and I don't know what's causing this spacing.
the dropdown list also always appears behind other items like photos or sliders with iphone (works perfectly in android).
<header>
<div class="header-container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="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="#">
<img class="tbc-logo" src="/NewDesign/img/tbc-logo.png">
</a>
</div>
<div id="language">
عربي
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--NAVIGATION -->
<ul class="nav navbar-nav ">
<li>Home <span class="sr-only">(current)</span></li>
<li class="dropdown">
About Us <span class="caret"></span>
<ul class="dropdown-menu">
<li>About TBC </li>
<li>Projects</li>
</ul>
</li>
<li class="dropdown">
Our Programs <span class="caret"></span>
<ul class="dropdown-menu">
<li>Private Schools</li>
<!-- <li role="separator" class="divider"></li>-->
<li>Investment </li>
</ul>
</li>
<li>Prequalification <span class="sr-only">(current)</span></li>
<li class="dropdown">
Careers <span class="caret"></span>
<ul class="dropdown-menu">
<li> Vacancies</li>
<li> COOP Training</li>
</ul>
</li>
<li class="dropdown">
Media files <span class="caret"></span>
<ul class="dropdown-menu">
<li>News</li>
<li>Photos</li>
<li>Library </li>
</ul>
</li>
<li>Contact Us <span class="sr-only">(current)</span></li>
</ul>
<!--END NAVBAR-->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</header>
I'm facing the same issue with chrome in iphone as well..
I am using Bootstrap3 <nav>, in the sample code the team used navbar-toggle collapsed class to collapse the elements in navbar on small screen.
My question is how to change the order of them when collapsed?
I made a short snippet:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav" aria-expanded="false">
<span class="sr-only">Options</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav collapse navbar-collapse">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="BRAND" src="some/img.png">
</a>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</nav>
</body>
</html>
To clarify, in my <nav>, from left to right there are a list, an image, another list. When they are collapsed on small screen, the order will be from top to bottom, list, image and list. How to put the image at the top when collapsed?
The easiest way would be to create the brand html twice, and make one visible on xs and the other hidden on xs.
You can do this by adding the visible-xs and hidden-xs classes to the containers that you want to be either visible or hidden when the navbar is collapsed.
By doing this you can display the brand image in both places without having to add any JavaScript.
CodePen Demo
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav" aria-expanded="false">
<span class="sr-only">Options</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav collapse navbar-collapse">
<li class="dropdown">
<div class="navbar-header visible-xs">
<a class="navbar-brand" href="#">
<img alt="BRAND" src="some/img.png" />
</a>
</div>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bars" aria-hidden="true"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>LINK1</li>
<li>LINK2</li>
</ul>
</li>
</ul>
<div class="navbar-header hidden-xs">
<a class="navbar-brand" href="#">
<img alt="BRAND" src="some/img.png" />
</a>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
<li class="dropdown">
Hi! User<span class="caret"></span>
<ul class="dropdown-menu">
<li> Profile</li>
<li> Feedback</li>
<li role="separator" class="divider"></li>
<li> Log Out</li>
</ul>
</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I'm trying to implement a simple design with a navbar and two side by side wells, but the wells are not aligning with their container, overflowing it horizontally to the right (screenshot at http://imgur.com/a/4XK25)
I'd also like the wells to fit the screen height, but currently they overflow vertically making the user have to scroll down.
Here's my code, JSFiddle renders it differently from Firefox (link to screenshot above), fiddle at https://jsfiddle.net/vrk3vcxb/
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="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="#">Brand</a>
</div> <!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> One
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Two</li>
<li>Three</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li onclick="#">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> Four
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Five
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Six</li>
<li>Seven</li>
<li role="separator" class="divider"></li>
<li>Eight</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="well">
</div>
</div>
<div class="col-md-4">
<div class="btn-group btn-group-xl" role="group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Nine</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Ten</button>
</div>
<div class="well">
</div>
</div>
</div>
</div>
</div> <!-- top container -->
</body>
Any hints on what I'm doing wrong?
Better to remove 'container' class just above the 'row' class, it will help the overflowing to right.
For the wells to fit the screen height just add some styles: height:100vh
To fix you're overflowing well you might wanna add it into a col... In the fiddle you had it placed outside the col-md-4 div...
As you add content to the wells they should vertically fill the page... you could always add some padding I would also recommend using a separate CSS file and removing the inline styles.
If you need more help let me know and ill amend my answer for you.
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="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="#">Brand</a>
</div> <!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Scans
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Scan files</li>
<li>See previous scans</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li onclick="#">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> Help
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Account
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Send feedback</li>
<li>Upgrade account</li>
<li role="separator" class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="row">
<div class="col-md-8">
<div class="well">
<div id="dText" style="background: white; height: 85%; overflow-y:auto; padding:10px;" ></div>
</div>
</div>
<div class="col-md-4">
<div class="btn-group btn-group-xl" role="group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span> Previous</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward" aria-hidden="true"></span> Next</button>
</div>
<div class="well">
<div id="dText2" style="background: white; height: 85%; overflow-y:auto; padding:10px;" ></div>
</div>
</div>
</div>
</div> <!-- top container -->
</body>
</html>
You also have a container wrapping the whole thing... But then inside your navbar you have a container-fluid Try and write the whole thing yourself from scratch... use the bootstarp documentaion for a referance
For the wells height you can use, as already suggested VH, or flexbox if no need to support explorer < 9.
As for the grid, you have a nested container class giving an extra padding, your code should look like this:
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="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="#">Brand</a>
</div> <!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> One
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Two</li>
<li>Three</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li onclick="#">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> Four
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Five
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Six</li>
<li>Seven</li>
<li role="separator" class="divider"></li>
<li>Eight</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="row">
<div class="col-md-8">
<div class="well">
</div>
</div>
<div class="col-md-4">
<div class="btn-group btn-group-xl" role="group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Nine</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Ten</button>
</div>
<div class="well">
</div>
</div>
Codepen: https://codepen.io/giannidk/pen/owpYEG?editors=1100
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>
I want to a add 3 column bootstrap menu in WordPress, but i am unable to do this. I have tried a lot, but the sub menus and the columns are not not shows. can any one please help me.
Here is my bootstrap code.
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-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" href="<?php bloginfo('url')?>">
<img alt="Brand" src="img/is-logo.png">
</a>
</div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Information <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><span class="icon-airplane"></span> Airlines</li>
<li><span class="icon-github"></span> Animal</li>
<li><span class="icon-apple"></span> Apple</li>
<li>
<a href="#">
<span class="icon-Flag_of_Bangladesh"><span class="path1"></span><span class="path2"></span></span>
Bangladesh
</a>
</li>
<li><span class="icon-twitter"></span> Birds</li>
<li><span class="icon-droplet"></span> Blood</li>
<li><span class="icon-git-cat"></span> Cat</li>
<li>
<a href="#">
<span class="icon-Flag_of_China"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span><span class="path16"></span><span class="path17"></span><span class="path18"></span><span class="path19"></span><span class="path20"></span><span class="path21"></span><span class="path22"></span><span class="path23"></span></span>
China
</a>
</li>
<li>
<a href="#">
<span class="icon-Flag_of_Denmark">
<span class="path1"></span><span class="path2"></span><span class="path3"></span>
</span>Denmark
</a>
</li>
<li><span class="icon-library"></span> Education</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><span class="icon-airplane"></span> Airlines</li>
<li><span class="icon-github"></span> Animal</li>
<li><span class="icon-apple"></span> Apple</li>
<li>
<a href="#">
<span class="icon-Flag_of_Bangladesh"><span class="path1"></span><span class="path2"></span></span>
Bangladesh
</a>
</li>
<li><span class="icon-twitter"></span> Birds</li>
<li><span class="icon-droplet"></span> Blood</li>
<li><span class="icon-git-cat"></span> Cat</li>
<li>
<a href="#">
<span class="icon-Flag_of_China"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span><span class="path16"></span><span class="path17"></span><span class="path18"></span><span class="path19"></span><span class="path20"></span><span class="path21"></span><span class="path22"></span><span class="path23"></span></span>
China
</a>
</li>
<li>
<a href="#">
<span class="icon-Flag_of_Denmark">
<span class="path1"></span><span class="path2"></span><span class="path3"></span>
</span>Denmark
</a>
</li>
<li><span class="icon-library"></span> Education</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><span class="icon-airplane"></span> Airlines</li>
<li><span class="icon-github"></span> Animal</li>
<li><span class="icon-apple"></span> Apple</li>
<li>
<a href="#">
<span class="icon-Flag_of_Bangladesh"><span class="path1"></span><span class="path2"></span></span>
Bangladesh
</a>
</li>
<li><span class="icon-twitter"></span> Birds</li>
<li><span class="icon-droplet"></span> Blood</li>
<li><span class="icon-git-cat"></span> Cat</li>
<li>
<a href="#">
<span class="icon-Flag_of_China"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span><span class="path16"></span><span class="path17"></span><span class="path18"></span><span class="path19"></span><span class="path20"></span><span class="path21"></span><span class="path22"></span><span class="path23"></span></span>
China
</a>
</li>
<li>
<a href="#">
<span class="icon-Flag_of_Denmark">
<span class="path1"></span><span class="path2"></span><span class="path3"></span>
</span>Denmark
</a>
</li>
<li><span class="icon-library"></span> Education</li>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
</div>
</nav>
dropdown menus wont work noramly in the wordpress so use Walker Class that will make them work