I've got some troubles with bootstrap v3.3.4. I need to get search bar that will fit entire width of the navbar like this (v3.0.3): http://bootply.com/109727 But it feels like there is some troubles with input group and I am getting that (v3.3.4): http://plnkr.co/edit/4UwlbwM1O0zC9jxjXOOn?p=preview Any ideas how to fix that? Or is there another way to get same result?
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container" id="navbar-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="#">Furni.co</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-btn mr10">
<a tabindex="0" class="btn btn-danger" role="button" data-popover-content="#popover_sign_up" data-toggle="popover" >Sign up</a>
</p>
</li>
<li>
<p class="navbar-btn">
<a tabindex="0" class="btn btn-default" role="button" data-popover-content="#popover_log_in" data-toggle="popover" >Log in</a>
</p>
</li>
</ul>
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<span class="input-group-addon go">Go!</span>
<input type="text" class="form-control navbar-search" placeholder="Search cnc furniture">
<span class="input-group-addon top-bars btn-default">
<span class="fa fa-bars"></span>
<div class="arrow-container">
<span class="fa fa-sort-desc"></span>
</div>
</span>
</div>
</div>
</form>
</div>
</div>
</nav>
Replace the following lines
<div class="form-group" style="display:inline;">
<div class="input-group">
with
<div class="form-group" style="display:inline-block; width:70%">
<div class="input-group" style="width:100%">
Here is what I got with the above change
http://plnkr.co/edit/e07Ces01ub81FKwzEqk7?p=preview
Related
I've got a brand image and a list including 2 glyph-icons & and search form within a navbar header but the search form button won't stay within the the nav bar and drops to the line below.
Does anyone know the CSS trick to get it onto the same line next to the rest of the li links?
All the CSS is bootstraps native commands.
To fully understand, a current photo:
HTML:
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="navbar-header">
<img id="brand-image" alt="DEVO Logo" src="/Applications/MAMP/htdocs/D0.1/images/DEVOorig.png"/>
</div>
<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>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li></li>
<li><span class="glyphicon glyphicon-user"></span></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span></li>
<li>
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</li>
</ul>
</div>
</div>
</nav>
Its simple you have to add the css rule display: inline-block; to your form-group and thats it. You could even remove the surrounding li
Check Fiddle
Add class .form-inline to the .form-control div. Also, insert the button to that div.
See the result:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="navbar-header">
<img id="brand-image" alt="DEVO Logo" src="/Applications/MAMP/htdocs/D0.1/images/DEVOorig.png"/>
</div>
<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>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li></li>
<li><span class="glyphicon glyphicon-user"></span></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span></li>
<li>
<div class="form-group form-inline">
<input type="text" class="form-control" placeholder="Search">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</li>
</ul>
</div>
</div>
</nav>
http://jsbin.com/gogeyiy/edit?html,output
Instead of form group you can try input group like this: Demo
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Submit</button>
</span>
</div>
I'm creating a navbar-fixed-top for my page and when the navbar is collapsed (e.g. for small viewports), there is extra space between the "Brand" name and the expand menu icon.
Here is a picture of what is happening:
Extra Space in Collapsed Navbar
And here's my navbar code:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class ="container">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navTop">
<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="navbar-collapse collapse" id="navTop" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li>
About
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<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"
style="padding-bottom: 7px;"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
Can you help me figure out how to remove the extra space? Thanks!
Your navbar-header should enclose the button, it currently ends before the button starts. Also, (depending on your use case) the form doesnt need to be inside a ul and causes display issues if it is actually. See Docs
See working Example Snippet.
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navTop">
<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" id="navTop">
<ul class="nav navbar-nav">
<li>
About
</li>
</ul>
<form class="navbar-form navbar-right" 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>
</nav>
see if you have the following. Hope it helps
.navbar-brand {float: left;} and .navbar-toggle{float: right;}
I have a bootstrap based html that looks the way I want in Bootply, but in my page the query field looks narrower than it should. I just don't know what is wrong.
Here is the code:
<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="#">Link</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">Welcome <span class="caret"></span>
<ul class="dropdown-menu">
<li>Sair</li>
</ul></li>
</ul>
<form class="navbar-form" method="post">
<div class="form-group" style="display: inline;">
<div class="input-group">
<input type="text" class="form-control" placeholder="Busca" name="q">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</form>
</div>
<!--/.navbar-collapse -->
</div>
Here is the desired result:
Here is the real result:
What you're seeing the default behavior. You can easily adjust this to accommodate your needs though. Assign the form a new class, add the appropriate width and you may want/need to adjust the top position.
See working Snippet at Full Page.
#media (min-width: 768px) {
.navbar-form-fw {
width: 95%;
}
.input-group.input-group-fw {
top: 8px;
}
}
<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="#">Link</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">Welcome <span class="caret"></span>
<ul class="dropdown-menu">
<li>Sair
</li>
</ul>
</li>
</ul>
<form class="navbar-form-fw" method="post">
<div class="form-group">
<div class="input-group input-group-fw">
<input type="text" class="form-control control-form" placeholder="Busca" name="q"> <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</form>
</div>
</div>
</nav>
In Bootstrap 3.3.4, I try to have an input group in a navbar that spans 8 central columns, next to brand name. Unfortunately input group either seems to remain fixed size, or stretches input-group-addon. The code that is the closest to what I want to achieve (modulo this stretching) is this:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<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="col-xs-8">
<form class="navbar-form">
<div class="form-group" style="width: 100%">
<div class="input-group" style="width: 100%">
<input type="text" class="form-control" style="width: 100%">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</div>
</form>
</div>
</div>
If you give the form a class of form it will allow the form group to stretch to 100% as you want.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<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="col-xs-8">
<form class="form">
<div class="form-group">
<div class="input-group" style="">
<input type="text" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</div>
</form>
</div>
</div>
</nav>
http://codepen.io/anon/pen/QbWMax
I'm new to Bootstrap, and I'm building a navbar with a second row. The second row is only called when the search box it contains is required. To call it, I have an always-visible button-styled-link that works perfectly in mobile device widths, but will not hide it in desktop widths. What am I not getting? Below is the HTML, and here's a Bootply sample. Thanks in advance... `
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="btn-group">
<a class="btn btn-inverse navbar-btn" href="#" title="Search" data-toggle="collapse" data-target="#nav2">
<span class="glyphicon glyphicon-search white"></span>
</a>
<a class="navbar-brand" rel="home" href="#" title="Title">Brand</a>
</div>
</div>
<div class="collapse navbar-collapse" id="nav1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
<div class="collapse navbar-collapse" id="nav2">
<form class="navbar-form" role="search" id="srch-frm">
<div class="input-group">
<input class="form-control typeahead" placeholder="Search" name="pn" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div><!--/.nav-collapse -->
`
Very nice. Just remove "navbar-collapse" on the collapse surrounding the search.
http://www.bootply.com/5fUw0Xo2vX
<div class="collapse" id="nav2">
<form class="navbar-form" role="search" id="srch-frm">
....