Menu
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><a href="#">Hollywood Account</a></li>
<li><a href="#">Another Account</a></li>
<li><a href="#">Yet another Account</a></li>
</ul>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
462
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><a href="#">Hollywood Account</a></li>
<li><a href="#">Another Account</a></li>
<li><a href="#">Yet another Account</a></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><a href="#">Hollywood Account</a></li>
<li><a href="#">Another Account</a></li>
<li><a href="#">Yet another Account</a></li>
</ul>
</div>
</div>
</li>
</ul>
Here it is on CodePen
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
