I am trying to add search form to the top navbar code shown below so that it will appear just before the Logout link with a small space and aligned to the right side, but it always appear either after the logout link or it will expand the navbar and look bad.
So can someone please help me by telling me what I am missing here? Thanks for your time.
Head section:
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<title>Test</title>
</head>
Body section:
<nav class="navbar navbar-inverse" role="navigation">
<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="#">Company</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="active dropdown">
Employees <b class="caret"></b>
<ul class="dropdown-menu">
<li>New Employee</li>
<li class="divider"></li>
<li class="nav-header">Reports</li>
<li>Employees List</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="input-small" 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>
<li>Logout</li>
</ul>
</div>
</nav>
You cannot put a <form> inside of an <ul> but not wrapped in a <li> so here is what seems to work:
jsFiddle
<nav class="navbar navbar-inverse" role="navigation">
<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="#">Company</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li class="active dropdown">
Employees <b class="caret"></b>
<ul class="dropdown-menu">
<li>
New Employee
</li>
<li class="divider"></li>
<li class="nav-header">Reports</li>
<li>
Employees List
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
logout
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
Related
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 bootstrap to have a side navigation bar in mijn application. I would like the dropdown menu's to be open by default, but I can't work it out...
My code:
<nav class="navbar navbar-default sidebar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-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>
</div>
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home of {{ Auth::user()->name }}<span style="font-size:16px;"></span></li>
<li class="dropdown">
Input <span class="caret"></span><span style="font-size:16px;"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Form</li>
</ul>
</li>
<li class="dropdown">
</span><span style="font-size:16px;"></span>
<ul class="dropdown-menu" role="menu">
<li>Results</li>
</ul>
</li>
<li>Tools<span></span></li>
<li>Documentation<span></span></li>
#endif
</ul>
</div>
</div>
</nav>
Try to change
<li class="dropdown">
to
<li class="dropdown open">
After some time I managed to place the dropdown list totally on the right and right-align the form and the dropdown menu. I also used a glyphicon for the dropdown list.
My questions are:
Is it correct to align components in the way I did or is there a best practice to do this?
Can I use a glyphicon in a dropdown class or do I need to use a button dropdown list for that?
You can check my code below. I hope you can advice me or give a good tip. Thank you.
<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="{{ path('homepage') }}">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>Acción #1</li>
<li>Acción #2</li>
<li>Acción #3</li>
<li class="divider"></li>
<li>Acción #4</li>
</ul>
</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
Use navbar-right with your navbar-form and place it ouside of the UL. See example.
<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-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="{{ path('homepage') }}">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>Acción #1
</li>
<li>Acción #2
</li>
<li>Acción #3
</li>
<li class="divider"></li>
<li>Acción #4
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
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 took help from this link: http://www.bootply.com/lJgThXaVXi# when bulding my double navbar, and the effect I have is the same as in this example. However, When my navbar collapses I get 2 buttons instead of 1 (the example only get one collapse-button that shows the data from both navbars).
Also, when I press the collapse-button of navbar1 it shows everything in navbar1, however when I press the collapse-button in navbar2, that triggers the collapse-button of navbar1. Ive been going over the code in the example in detail and can not find anything I do differently.
Basically I wish for 1 collapse button showing all the information from both navbars.
Code:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
Logo
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Add site</li>
</ul>
<div class="col-sm-3 col-md-3" style="background-color:red">
<div class="navbar-form" role="search">
<div class="input-group">
<asp:TextBox ID="TextBoxSearch" CssClass="form-control" placeholder="Search" runat="server"></asp:TextBox>
<div class="input-group-btn">
<asp:LinkButton ID="LinkButtonSearch" CssClass="btn btn-default" OnClick="search_click" runat="server"><i class="glyphicon glyphicon-search"></i></asp:LinkButton>
</div>
</div>
</div>
</div>
<ul class="nav navbar-nav navbar-right" style="background-color:blue">
<li >
<asp:LinkButton ID="LinkButtonRegister" runat="server" OnClick="Register">Register</asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButtonLogin" data-toggle="modal" data-target="#loginModal" runat="server">Log in</asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButtonLogout" runat="server" OnClick="Logout">Log out</asp:LinkButton></li>
</ul>
</div>
</div>
</div>
<!-- END OF FIRST NAVBAR -->
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Add site</li>
</ul>
</div>
</div>
</div>
You have two collapse buttons in your code. Remove one (of these):
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
Also, I created a demo of a double nav bar collapsing with one button (that I use), using the bootstrap demo navbars:
My Bootstrap Double Top Nav Bars
Here's the relevant code:
<div class="navwrap">
<!-- first navbar -->
<div class="navbar navbar-default navbar-static-top no-bottom-margin">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand">Brand</span>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".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>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<div class="navbar-right">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</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>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- second navbar -->
<div class="navbar-inverse">
<div class="container">
<nav class="collapse navbar-collapse nested-nav global-nav" role="navigation">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</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>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
With the addition of this CSS rule:
.no-bottom-margin{margin-bottom:0;}
HTH,
-Ted