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.
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>
So, want put a navbar-fixed-top in my nav. The proposal is that my nav follow when scrolling page. But the difficulty is that my nav is overlapping the section right below in this case, my carousel slide.
here de jsfiddle
https://jsfiddle.net/fhvo7anz/
<header class="container-fluid">
<div class="container bghead navbar-fixed-top ">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="images/logo.png"><br>
</div>
<div class="col-md-8">
<nav class="navbar navbar-default bgnav">
<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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home<span class="sr-only"></span></li>
<li class="dropdown">
Institucional <span class="caret"></span>
<ul class="dropdown-menu">
<li>Institucional</li>
<li>Missão, Visão e Valores</li>
<li>Organograma</li>
<!--<li role="separator" class="divider"></li>-->
</ul>
</li>
<li>Atividades</li>
<li>Link</li>
<li>Contato</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Procurar">
</div>
<button type="submit" class="btn btn-default">Ir</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
</div>
</header>
Add this to your CSS:
#carousel-example-generic {
margin-top:150px;
}
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 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>
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?