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
Related
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 trying to implement twitter bootstrap collapsible navigation bar. On Desktop navigation bar is visible but on mobile screen it's not visible.
Here is View Part
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand"><img src="/x/img/X.png" style="width:80px; position:relative; top:-20px;"></img></h3>
<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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" style="margin-top:15px;background-color:rgba(255,255,255,.4)">
<li class="active"><a class="call_us btn btn-default no-rounded btn-hollow" th:text="${'+91 444}" style="cursor:default; pointer-events:none;"> Call Us 555</a></li>
<li ><a th:href="#{/X}" href="#">X</a></li>
<li><a th:href="#{/Y}" href="#">Y</a></li>
<li><a th:href="#{/Z}" href="#">Z</a></li>
<li><a th:href="#{/T}" href="#">C</a></li>
<li class="active"><a th:href="#" href="#">Blog</a></li>
<!--li>Help</li-->
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Can some one help me to fix this issue. I have included collapse.js in my path.
You're missing the navbar class which is the first line of the default navigation in Bootstrap. See Docs.
<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" />
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand"><img src="http://placehold.it/350x150" style="width:80px; position:relative; top:-20px;"></img></h3>
<nav class="navbar navbar-default">
<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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" style="margin-top:15px;background-color:rgba(255,255,255,.4)">
<li class="active"><a class="call_us btn btn-default no-rounded btn-hollow" th:text="${'+91 444}" style="cursor:default; pointer-events:none;"> Call Us 555</a>
</li>
<li><a th:href="#{/X}" href="#">X</a>
</li>
<li><a th:href="#{/Y}" href="#">Y</a>
</li>
<li><a th:href="#{/Z}" href="#">Z</a>
</li>
<li><a th:href="#{/T}" href="#">C</a>
</li>
<li class="active"><a th:href="#" href="#">Blog</a>
</li>
<!--li>Help</li-->
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
</div>
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 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>