I'm using bootstrap and trying to put a search form inside a navbar dropdown menu, but I'm finding the form looks squashed because the width of the dropdown is too small. Also, the form elements are not how I would like. How do I fix this?
I'm new to CSS and web design in general. Please help!
Current layout:
What I'm trying to achieve:
<header class="navbar navbar-inverse navbar-fixed-top navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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>
Brand
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Browse</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
Locate <b class="caret"></b>
<ul class="dropdown-menu">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<button type="button" class="btn btn-default navbar-btn"><li class="icon-screenshot"></li></button>
<input type="text" class="form-control" placeholder="Address">
</div>
<div class="btn-group">
<button type="submit" class="btn btn-default">Search</button>
<ul class="dropdown-menu" role="menu">
<li>Link</li>
<li>Link</li>
</ul>
</div>
</form>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
USER <b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="icon-pencil"></i> Link</li>
<li><i class="icon-upload"></i> Link</li>
<li class="divider"></li>
<li><i class="icon-signout"></i> Link</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
Try this:
.navbar-nav>li>.dropdown-menu { width: yourwidth }
You can add display: inline-block so that its width will be according to its content automatically
You can increase the "min-width" value in the dropdown.less
or make a new line in the css
.dropdown-menu { min-width: 200px }
Related
I'm working on a project using CodePen and I'm using bootstrap to make a navbar. But for some reason it's displaying vertically instead of horizontally. Even when I copy and paste code from the W3Schools examples and the Bootstrap website. I don't know what else to do. Please help.
This is the W3Schools example code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
This is example code from the Bootstrap website:
<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" 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="#">Brand</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
Both do not work. And yes, I've triple checked my <link> and <script> tags.
Edit: here is my CodePen
First like in the comments you are using bootstrap 3 markup and you are linking to both bootstrap 3 and 4 remove the bootstrap 4 css. Then you need to have the div with the class of collapse navbar-collapse so just add this to the div that has the id of nav just like the following:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#about">
<span style="font-family: 'Source Code Pro', Monospace; color:green"><i class="fa fa-code"></i>Ryan</span></a>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
You may want to add the collapse button to the navbar header as well otherwise your links wont show up at mobile widths so it would look like:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" 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="#about">
<span style="font-family: 'Source Code Pro', Monospace; color:green"><i class="fa fa-code"></i>Ryan</span>
</a>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
As someone said - remove bootstrap 4 from loaded CSS files and it will work
I have a Bootstrap3 navbar with a dropdown menu.
I want my "logout" form inside that dropdown. It is not a visible form, just a logout button within a form.
I tried this:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<!-- this dropdown menu item looks right -->
<li>Foo</li>
<!-- this dropdown menu item (a logout form) does not -->
<li><form action="/logout" method="post"><button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button></form></li>
</ul>
</li>
</ul>
</div>
But it is not styled properly.
How do I make it match normal dropdown links? I hope I don't need to manually tweak the css, and that there's a built in way to do this?
That will not really work, but you can create the logout-form somewhere else:
<form id="logout-form" style="display:none" action="/logout" method="POST"></form>
and when the user clicks on logout you just call
document.getElementById("logout-form").submit();
in Javascript or you set
onclick="document.getElementById('logout-form').submit();"
try this Sample [UPDATED]
.btn-logout {
width: 100%;
padding: 3px 20px !important;
text-align: left !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<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" 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="#">Brand</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 class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li>
<form>
<button type="submit" class="btn btn-link btn-logout">Logout</button>
</form>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
</div>
I have helped you in some way
try this just give link to .java/servlet file.
<li><span class="glyphicon glyphicon-user"></span>Logout</li>
Please see code below or this bootply
I'm having some serious issues with this.
My issues:
I can't get all of the items in the navbar nicely aligned. Any ideas?
I don't want to show the searchfield on the mobile version, how omit?
Trying to insert the bootstrap glyphicon for search instead of the images in the css code for search, but how trigger glyphicon in css, can I make it dark or white?
<nav class="navbar navbar-inverse navbar-fixed-top my-navbar">
<div class="container">
<!-- 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="/boyt2">Company Name</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>• Link 1<span class="sr-only">(current)</span></li>
<li>Link 2</li>
<li>
<form class="navbar-form navbar-left searchsite" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Username <span class="caret"></span> <img src="http://placehold.it/30x30">
<ul class="dropdown-menu noshadow">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- JavaScript files should be linked at the bottom of the page -->
<script src="js/jquery.min.js"></script>
<!-- Latest compiled and minified Javascript -->
<script src="js/bootstrap.min.js"></script>
Add this CSS:
#media (min-width: 768px) {
.navbar .navbar-brand {
padding: 20px 15px;
}
.navbar .nav:not(.navbar-right) > li > a {
padding: 20px 15px;
}
.navbar-form {
margin-top: 14px;
}
}
The image in the navbar-right is causing the navbar to be 60px tall instead of the default 50px, 20px padding will center the elements.
To hide the searchbar on mobile, you can add the class hidden-xs:
<form class="navbar-form navbar-left searchsite hidden-xs" role="search">
</form>
For the search button, try using font-awesome, it would look better (there is a white/black version (http://fontawesome.io/icon/search/))
Refer to this link: How to center navbar elements vertically (Twitter Bootstrap)?
for the vertical centering
Use this (set the class to hidden-phone hidden-tablet) to remove search on mobile
<li class="hidden-phone hidden-tablet">
<form class="navbar-form navbar-left searchsite" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
Hope this helped! (Try to accept the answer if it works) :)
the misalignment is due to height of the image of your image in .navbar-right
to hide the search in mobile you can use hidden-xs
to use the search icon you can use glyphicons that bootstrap already has.
You can check them here
.glyphicon-search {
color: white
}
<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 my-navbar">
<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="/boyt2">Company Name</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 class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left hidden-xs" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Username <span class="caret"></span> <img src="http://placehold.it/20x20">
<ul class="dropdown-menu noshadow">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I would like to use navbar-right on a navbar-form and a navbar-nav however it ends up putting the form on one row and the navbar_nav on another row on the right. How can I get the navbar to show the brand on the left and on the right is a search field followed by a nav links.
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid col-sm-12 col-lg-offset-2 col-lg-8">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<a class="navbar-brand" href="/" style="white-space:nowrap">Site</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar_collapse">
<div class="navbar-right">
<form class="navbar-form" role="search" ng-submit="collectionSearch()">
<div class="form-group">
<input type="text" class="form-control" placeholder="Collection ID"
ng-model="cSearch" size=10 required>
</div>
</form>
<ul class="nav navbar-nav">
<li id="create_tab">Create</li>
<li id="tests_tab">Tests</li>
<li id="collections_tab">Collections</li>
<li id="account_tab">Account</li>
<li id="logout_tab" >Logout</li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Any suggestions are appreciated. Thank you!
You need to use this bootstrap classes navbar-form and navbar-left to move the search icon on left side. Here is a DEMO.
<form class="navbar-form navbar-left" role="search" ng-submit="collectionSearch()">
</form>
If I understand correctly, this should answer your question:
http://jsfiddle.net/zu5uoopc/
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- 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-brand" href="#">Brand</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 class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
I am trying to achieve a two row navigation using BS 3, but I am having a hard time find out how to do it. Every method I've tried has failed. I would like to keep the markup as standard as possible. Here's what I want it to look like:
http://jsfiddle.net/technotarek/ePGa9/
The example uses old BS code. I can't seem to get it to work in BS 3.0.
Here's my attempt. The logo is quite large, but I want it to scale accordingly.
<nav class="navbar navbar-default" 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=".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>
<a class="navbar-brand" href="/"><img class="img-responsive" src="http://placehold.it/490x164&text=Logo" alt="My Logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<form class="navbar-form pull-right">
<div class="input-group">
<input type="text" class="search-box-text form-control" />
<span class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="icon-search"></i></button>
</span>
</div>
</form>
<ul class="nav navbar-nav pull-right">
<li>Register</li>
<li>Log in</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
Your code is here BootstrapNavbarWithLogoSearchbarResponsive
html
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> <img src="http://placehold.it/70x70">
</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Active</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
css
.navbar-brand {
float: left;
height: 10%;
padding: 0;
}