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?
Related
I'm new to Bootstrap and having some styling issues with a project I'm working on. When my window is resized and made smaller, my columns start to overlap. How do I fix this and make it so the text (in this case the messages) are always aligned to the left side of the column?
What am I doing wrong here?
I've made an example page here:
https://www.bootply.com/JxB5m6qw8Z
<nav class="navbar navbar-default navbar-fixed-top">
<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="/">Chat</a>
</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"></ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
User2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Settings</li>
<li role="separator" class="divider"></li>
<li><a rel="nofollow" data-method="delete" href="/users/sign_out">Logout</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="fluid-container" style="margin-top: 70px">
<div class="row">
<div class="col-sm-2 sidebar-main">
<div class="sidebar-items">
<div class="sidebar-channels">
<h4>Channels</h4>
<ul>
<div class="sidebar-listitem">
<li># <a data-behavior="chatroom-link" data-chatroom-id="25" href="/chatrooms/25">General</a></li>
</div>
</ul>
</div>
<div class="sidebar-users">
<h4>Current Users</h4>
<ul>
<div class="sidebar-listitem">
<li><a data-behavior="chatroom-link" data-chatroom-id="28" href="/direct_messages/6">User1</a></li>
</div>
<div class="sidebar-listitem">
<li><a data-behavior="chatroom-link" href="/direct_messages/7">User3</a></li>
</div>
</ul>
</div>
</div>
</div>
<div class="col-sm-10 col-sm-offset-2 body-main">
<div class="room-name">
<h2>General</h2>
</div>
<div class="message-window">
<div data-behavior='messages' data-chatroom-id='25' class="messages">
<div><strong>User2: </strong> sd</div>
<div><strong>User2: </strong> csd</div>
<div><strong>User2: </strong> c</div>
<div><strong>User2: </strong> sdc</div>
<div><strong>User2: </strong> sd</div>
<div><strong>User2: </strong> cs</div>
</div>
<div class="message-form">
<form class="new_message" id="new_message" action="/chatrooms/25/messages" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="4NCGg4CJSb0jWbL+Xsx+FuNYTIUM/LD/el5IIuF3cRTHLXy9LzFAIUR+T5C8ATiJKeYdrbceMAeTc79E7OgLGg==" />
<textarea rows="1" class="form-control" autofocus="autofocus" name="message[body]" id="message_body">
</textarea>
</form>
</div>
</div>
</div>
</div>
</div>
I am pretty sure your problem is that using col-sm isn't working because your screen is smaller than what that column size is meant to accommodate. Try using col-xs instead.
Not to mention, you used fluid-container instead of container-fluid at one point.
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;
}
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.