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">
....
Related
I'm new to Bootstrap and I want to change the height of my navbar. I've seen some topics about that but nothing solved my problem. I took the navbar code from a theme so i don't understand all of the code yet. Tried to change the height of navbar class but there are many of them so i'm quite confused.
navbar class from index.html :
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
<div class="container" >
<!-- Brand and toggle get grouped for better mobile display -->
<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-left" href="#"><img src="images/_ressources/logo.svg" height="50px"></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">
<li>
ACCUEIL
</li>
<li>
BOUTIQUE
</li>
<li>
CONTACT
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
MON COMPTE
</li>
<li>
<div class="input-group-btn">
<button type="button" class="btn btn-default btn-lg" style="background-color:orange">
<span class="glyphicon glyphicon-lock" ></span>
</button>
</div>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recherche un produit">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container -->
</nav>
You can apply the height css attribute to your navbar class and it will work
However you should do this in a separate css file and not modify
bootstrap's own css.
One thing that you should keep in mind is that when you include the css file in your html is that, it should be included after the bootstrap.min.css so that it will override bootstrap css.
.navbar {
height: 80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
<div class="container" >
<!-- Brand and toggle get grouped for better mobile display -->
<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-left" href="#"><img src="images/_ressources/logo.svg" height="50px"></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">
<li>
ACCUEIL
</li>
<li>
BOUTIQUE
</li>
<li>
CONTACT
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
MON COMPTE
</li>
<li>
<div class="input-group-btn">
<button type="button" class="btn btn-default btn-lg" style="background-color:orange">
<span class="glyphicon glyphicon-lock" ></span>
</button>
</div>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recherche un produit">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container -->
</nav>
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 am using bootstrap to style my site and I want to use it to style my search field. When I do the button looks like a large square instead of the rounded button that's supposed to go with the search field. heres the code
{{-- Navigation --}}
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
{{-- Brand and toggle get grouped for better mobile display --}}
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#navbar-main">
<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="/">{{ config('blog.name') }}</a>
</div>
{{-- Collect the nav links, forms, and other content for toggling --}}
<div class="collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>
Home
</li>
</ul>
<ul class="nav navbar-nav">
<li>
Contact
</li>
</ul>
<div class="col-sm-3 col-md-3 pull-right">
<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>
The css is the standard css with nothing altered. Tried to paste it but it slowed my computer down. Can anyone suggest what I could do to rectify this?
Fiddle
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