I am trying to achieve a dropdown menu using bootstrap in a navbar. I came across this example and it obviously works perfectly. However I wanted to change the 1st dropdown ( from the left ) to a dropdown button. However if I try and change it to a button the styling gets all messed up ( see image below).
Relevant code:
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo goes here</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Hollywood Account</li>
<li>Another Account</li>
<li>Yet another Account</li>
</ul>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
wrap the .btn in a wrapper classed as navbar-form to enable the padding as per the example given, like follows:
<ul class="nav navbar-nav">
<li class="dropdown">
<!-- doesn't need to be a form element -->
<form class="navbar-form">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select an Account<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Hollywood Account</li>
<li>Another Account</li>
<li>Yet another Account</li>
</ul>
</div>
</form>
<!-- example using div and anchor instead of form and button -->
<div class="navbar-form">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Hollywood Account</li>
<li>Another Account</li>
<li>Yet another Account</li>
</ul>
</div>
</div>
</li>
</ul>
Here it is on CodePen
There is no reason to have the btn wrapped in a form that makes no sense. In bootstrap 3 you just need to add the class .navbar-btn to the button to have it vertically align in the navbar. Also If you are only going to have the one button there is no reason to use a button group. If you are going to have more than one button then use button group. But the checked answer wrapping it in a form is just silly plus your adding another dom element for no reason. Try the following:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo goes here</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<button class="btn btn-default navbar-btn dropdown-toggle" data-toggle="dropdown">Select an Account<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Hollywood Account</li>
<li>Another Account</li>
<li>Yet another Account</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Drinkin People is correct
Simply changing this:
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>
To this:
<a class="navbar-btn btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>
It will center your button vertically in the navbar
Simply changing the <a> tag into a <button> tag should do the trick.
<ul class="nav navbar-nav">
<li class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Hollywood Account</li>
<li>Another Account</li>
<li>Yet another Account</li>
</ul>
</li>
</ul>
Edit: Checked on one of my own sites. Try removing the <div class="btn-group">.
Related
I am not so expert in CSS and Bootstrap so I can not build 2 submenus.
Do you have a simple solution for me?
<!-- Navigation -->
<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-brand" href="index.php">SAI</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 navbar-right">
<li class="dropdown">Titolo <b class="caret"></b>
<ul class="dropdown-menu">
<li>Sottotitolo 1</li>
<li>Sottotitolo 2</li>
<li class="dropdown">Sottotitolo 3 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Nuovo sottotitolo 1</li>
<li>Nuovo sottotitolo 2</li>
<li>Nuovo sottotitolo 3</li>
<li>Nuovo sottotitolo 4</li>
<li>Nuovo sottotitolo 5</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I have found some solutions on this site but they are too complex for me because I also have a few problems with the English language.
Thanks
Giampiero
I have made a small example for you that implements a Bootstrap dropdown with a small custom addition to support a sub-menu that opens on hover:
HTML
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="sub-menu">Sub-menu <span class="glyphicon glyphicon-play"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
CSS (compiled from LESS)
li.sub-menu {
position: relative;
}
li.sub-menu span.glyphicon {
font-size: 0.7em;
}
li.sub-menu:hover .dropdown-menu {
display: block;
top: 0;
left: 100%;
}
You can see this working example here: http://codepen.io/anon/pen/amvavW
You should read the documentation on how to create dropdown-menus with Bootstrap:http://getbootstrap.com/components/#dropdowns
They have practical explanations that comes bundled with some code and working examples.
As much as I remember(correct me if I am wrong): Bootstrap currently does not natively support N-levels dropdown menus, so what you do is kind of use their built-in dropdown implementation and add a bit of custom CSS to get more sub-menu levels working in the way that you desire.
Hope it helps a bit!
Currently, it appears that V4 has no documentation on using navbar dropdowns. Following the the V3 docs, the navbar on V4 does drop down on click, but appears to be unstyled. How can I get the dropdown to appear properly as shown in the V3 docs? I'm assuming that the css selector has changed; if that's the case, how would I go about finding the new undocumented selector?
This is what it currently looks like with V3 classes on the V4 library:
The HTML used:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a class="navbar-brand" href="/">HelloWorld</a>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Map</li>
<li>Grid</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Map</li>
<li>Grid</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">3<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Map</li>
<li>Grid</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="">Test</a></li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item"><a class="nav-link" href="">Logout </a></li>
</ul>
</nav>
</body>
</html>
You are using
<li> and <ul> whereas the documentation suggests to use <div> and <a> tags instead
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
1
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Edit: Fiddle for reference
Edit2: Ok so u missed the classes btn and btn-success. Also add css rule
.dropdown { display:inline-block;}
Edit3: Fiddle Link: Dropdown 1 with <a> instead of <button>
Try below:
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<div class="container-fluid">
<a class="navbar-brand" href="/">HelloWorld</a>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
1<span class="caret"></span>
<ul class="dropdown-menu">
<li>Map</li>
<li>Grid</li>
</ul>
</li>
<li class="dropdown">
2<span class="caret"></span>
<ul class="dropdown-menu">
<li>Map</li>
<li>Grid</li>
</ul>
</li>
<li class="dropdown">
3<span class="caret"></span>
<ul class="dropdown-menu">
<li>Map</li>
<li>Grid</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="">Test</a></li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item"><a class="nav-link" href="">Logout </a></li>
</ul>
</div>
</div>
Working Plnkr: Plnkr
Would it be possible using css bootstrap to recreate this style of menu I am using bootstrap and so far I have the top bar just with the two tabs and drop downs. I also see to show a drop down as in the administrator link you see and also a settings cog.
The blue icons buttons shoud be drop downs till the last item. I have posted my initial code on pastbin as the editor here was turning them into elements. Can someone advise me on how to stop that from hapening.
Code
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><i class="icon-home icon-white"></i> Home</li>
<li>Cassed Dimensions Portal</li>
<li>Configruation Items</li>
<li class="dropdown">
Products<b class="caret"></b>
<ul class="dropdown-menu">
<li>Latest Products</li>
<li>Popular Products</li>
</ul>
</li>
<li class="dropdown">
Membership<b class="caret"></b>
<ul class="dropdown-menu">
<li>Personal Membership</li>
<li>Premium Membership</li>
</ul>
</li>
<li>Offers</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Right</li>
<li>Right</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
I know this issue was covered in another post but his fix didn't work for me since I have a drop down sub-menu. Is there away just to make the menu collapse when switching between the two so the scroll bars don't appear?
Submenu css used
[http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3][1]
Fixed Tired
This is a known issue in 3.0.2
(https://github.com/twbs/bootstrap/issues/11243)
A workaround:
.navbar-collapse.in {
overflow-y: visible; } Demo: http://bootply.com/96924
Skelly
Restoring expanded responsive navbar menu creates scrollbar in Bootstrap 3.0.2
My CSS Menu
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="index.php">Chesapeake Controls Inc.</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div style="display: inline-block;" class="pull-right">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Capabilities<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-submenu">Building Automation Systems
<ul class="dropdown-menu">
<li>Products </li>
<li>Services </li>
</ul>
</li>
<li class="dropdown-submenu">HVAC Service
<ul class="dropdown-menu">
<li>Maintenance </li>
<li>Installation </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
Projects<b class="caret"></b>
<ul class="dropdown-menu">
<li>Building Automation</li>
<li>HVAC</li>
</ul>
</li>
<li>Careers</li>
<li>Contact Us</li>
<li class="dropdown">
Login<b class="caret"></b>
<ul class="dropdown-menu">
<li>Customer Portal</li>
<li>PPS Maintenance</li>
<li class="divider"></li>
<li>File Server</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</div>
</nav>
I am getting some part of my button dropdown out of the page viewing area.
I am using standard bootstrap code:
<div class="btn-group">
<button class="btn btn-info">Log In</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Log In with Facebook</li>
<li class="divider"></li>
<li>Create New Account</li>
</ul>
</div>
I have similar issue on bottom of the page also, where I have another button dropdown and then the dropdown part opens, it does not automatically adjust itself and I have to scroll down to view all the options.
Any suggestion?
I guess you didn't position the .btn-group in the right way.
Put it into the .navbar-inner-div and add the class .pull-right.
DEMO JSFIDDLE
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
<div class="btn-group pull-right">
<button class="btn btn-info">Log In</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Log In with Facebook</li>
<li class="divider"></li>
<li>Create New Account</li>
</ul>
</div>
</div>
</div>
You can make the following:
.dropdown-menu {
left: -80px;
}
I don't know why but pulling left is useless.