I want to have my search bar visible when the navbar collapses.
My code: http://jsfiddle.net/edalzell/a3yng825/1/ works when collapsed but shows two search bars when expanded.
HTML:
<header class= "blog-masthead">
<nav class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed pull-left" 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>
<form class="navbar-form collapsed navbar-right" role="search" action="/search" method="get">
<div class="form-group input-group">
<input type="text" class="form-control input-sm" placeholder="Search" id="sitesearch" name="query">
<span class="input-group-addon"><button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button></span>
</div>
</form>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Blog</li>
<li>About</li>
</ul>
<form class="navbar-form navbar-right" role="search" action="/search" method="get">
<div class="form-group input-group">
<input type="text" class="form-control input-sm" placeholder="Search" id="sitesearch" name="query">
<span class="input-group-addon"><button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button></span>
</div>
</form>
</div> <!-- navbar-collapse -->
</div>
</nav>
</header>
That is because you have two search bars declared,you have a couple of options to get the desired result
Remove the extra searchbar that you have declared in the collapse
section
Hide/show specific items on your desired resolution ,you can check
this SO thread
I have used the first way ,you can find the jsfiddle here
Complete code:
<header class= "blog-masthead">
<nav class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed pull-left" 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>
<form class="navbar-form collapsed navbar-right" role="search" action="/search" method="get">
<div class="form-group input-group">
<input type="text" class="form-control input-sm" placeholder="Search" id="sitesearch" name="query">
<span class="input-group-addon"><button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button></span>
</div>
</form>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Blog</li>
<li>About</li>
</ul>
</div> <!-- navbar-collapse -->
</div>
</nav>
</header>
Related
I'm not a seasoned Bootstrap user and I'm facing the following problem:
<header class="header">
<nav class="primary-nav navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#primary-nav" data-toggle="collapse" type="button">
<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="index.html">Hello</a>
</div>
<div class="collapse navbar-collapse" id="primary-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active">Welcome</li>
<li>Foo</li>
<li>Bar</li>
</ul>
<form class="search navbar-form navbar-right" role="search">
<div class="form-group">
<label class="has-clear">
<input autocapitalize="off" autocomplete="off" autocorrect="off" class="form-control" id="search-input" placeholder="Search..." type="text">
<span aria-hidden="true" class="form-control-clear glyphicon " id="clear-search"></span>
</label>
</div>
</form>
</div>
</div>
</nav>
</header>
See the companion codepen.
With this pretty trivial navbar setup, there are two things I have difficulties correcting:
I don't understand why I need custom CSS to get rid of search box's margin-bottom, imho stock bootstrap CSS should handle this but maybe I've made a mistake
I couldn't find a way to reliably make the search input fill the navbar's width without specifying an absolute width in px
While I can manage 1., I can't achieve a proper behavior for the navbar's search input that should take full width and disappear when the "hamburger" menu appears.
Thanks in advance for your help.
use this css
#search-input{
width: 100px;//specify width according to your requirement
}
visualize it in fullscreen
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#primary-nav" data-toggle="collapse" type="button">
<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="index.html">Hello</a>
</div>
<div class="collapse navbar-collapse" id="primary-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active">Welcome
</li>
<li>Foo
</li>
<li>Bar
</li>
</ul>
<form class="navbar-form" role="search">
<div class="form-group" style="display:inline;">
<div class="input-group" style="display:table;">
<input autocapitalize="off" autocomplete="off" autocorrect="off" class="form-control" id="search-input" placeholder="Search..." type="text">
<span class="input-group-addon" style="width:1%;"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</form>
</div>
</div>
</nav>
</header>
In my bootstrap-based ASP.NET application, I need to show navigational links (Home, About, etc.) on the right of the navbar. I also need to have a search button below the nav links. The button must be right-aligned with the right-most nav link. Here is the code that I tried:
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
<div class="col-sm-3 col-md-3 navbar-right">
<form class="navbar-form" role="search" method="get" action="~/Home/Search">
<div class="input-group ">
<input type="text" class="form-control" placeholder="Search" id="term" name="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>
However, the search button is still shown on the same row as the nav links.
How do I get items to vertically right-align in the navbar? Regards.
Just wrap the form in a new container, see this demo (also, I made edits to the structure to correct it):
<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">
<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>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right" role="search" method="get" action="~/Home/Search">
<div class="input-group ">
<input type="text" class="form-control" placeholder="Search" id="term" name="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>
</nav>
I am constructing a navigation bar using bootstrap framework. I am trying to align the search field to extreme right,but its not happening.
any suggestion would be appreciated . below is my code
<h1 id="topHeader"></h1>
<div id="logo">
<img src="/EduTechOnline/images/logo.png" width="200" height="80" />
<div id="slogan"><h2 id="slogan">Take the world's best online courses</h2></div>
</div>
<!-- This is the header that will be present on every page -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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 class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<nav id="headerli">
<li><a class="active"href="#">Home</a></li>
<li>Courses</li>
<li>About Us</li>
<li>Videos</li>
</ul>
<ul class="nav pull-right nav navbar-nav">
<li> <form class="navbar-form" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn-group btn-group-sm">Go</button>
</form>
</li>
</ul>
</ul>
</nav>
</div>
</ul>
</nav>
There were a few things that were incorrect. No closing </div> for the .navbar-header, #nav as a direct child of ul (that's not valid) and the wrong classes (.navbar-right not .pull-right). Compare with the examples and the docs.
DEMO: http://jsbin.com/vomera/1/edit
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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="navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="active"href="#">Home</a></li>
<li>Courses</li>
<li>About Us</li>
<li>Videos</li>
</ul>
<div class="navbar-right">
<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Go</button>
</form>
</div>
</div>
</nav>
Have you tried float: right; on .navbar-form?
You could also try taking it out of nav#headerli and the child li and putting it down on the second to last line of your snippet.
New to Bootstrap, but I want to have a header that always has a search bar on it regardless of the screen size. The nav bar will always have the search box and button, and then depending on the screen size have a set of links/buttons that will collapse on smaller devices. The search and the links should be on the same row.
Right now there seem to be issues with search box growing/shrinking and the links getting moved to a second row.
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Project</a>
<div class="col-xs-6 col-sm-4 pull-left">
<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"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Shows</li>
<li>States</li>
<li>Road Trip</li>
<li>Login</li>
</ul>
</div><!--/.navbar-collapse -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Shows</li>
<li>States</li>
<li>Road Trip</li>
<li>Login</li>
</ul>
</div><!--/.navbar-collapse -->
This also bar disappears on a smaller resolution, is that intentional?
I've been trying to make a responsive navbar with columns but I can't manage to react well to the different sizes I've trying al lot of things: column-offset, contaniers, paddings... but I can't get a decent result. Here it is what I managed to do so far:
<nav class="navbar navbar-default ">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" style="height: 0px;">
<div class="row show-grid">
<div class=" col-xs-8 col-md-6 col-md-offset-2" >
<ul class="nav navbar-nav" id="altre">
<li>Shop
</li>
<li>Style Guide
</li>
<li>Be a man
</li>
</ul>
</div>
<div class=" col-xs-4 col-md-4">
<ul class="nav navbar-nav hidden-xs" id="login">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Login</a>
<div class="dropdown-menu">
<form class="navbar-form" role="form">
<p><input class="form-control" type="text" placeholder="E-mail"></p>
<p><input class="form-control" type="password" placeholder="Contrasenya"></p>
<button type="button" class="btn btn-primary">Sign in</button>
<button type="button" class="btn btn-success">Log in</button>
</form>
</div>
</li>
</ul>
<form class="navbar-form text-center visible-xs" role="form">
<p><input class="form-control" type="text" placeholder="E-mail"></p>
<p><input class="form-control" type="password" placeholder="Contrasenya"></p>
<button type="button" class="btn btn-primary">Sign in</button>
<button type="button" class="btn btn-success">Log in</button>
</form>
</div>
</div>
</div>
</nav>
At first sight it seems to be working right but when you resize you see the difference between the right and left margin.
I'm very lost at this point, anyone knows a clean way to have a good result?
here the files if you don't want to download one by one:
https://drive.google.com/file/d/0BwOBDBZckmYwZ20tLTRQdFI3a3c/edit?usp=sharing
thanks
You need to use .container class in divs before rows, the problem that you have seems to be using percentages in margin-left.
<div class="container"><!-- container -->
<div class="row">
<ul>...
</div>
</div>
See: http://jsfiddle.net/uFwnU/