I have a dropdown menu nested in a navbar that I am opening during page load by adding the open
class to the li
element containing the dropdown menu.
I want this menu to stay open no matter what is clicked or where a user clicks on the page. I have tried different solutions found on Stackoverflow.com to similar problems, but none of them are working. They all seem to involve stopping the propagation of the click events from closing the menu. I am using bootstrap v3.3.4.
EDIT Here is the menu layout:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#" style="color:white;">menu1</a></li>
<li class="dropdown open">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" id="catalogmenu" aria-expanded="false" style="color:white;">menu 2 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#" style="color:white;">menu3</a></li>
<li><a href="#" style="color:white;">menu4</a></li>
<li><a href="#" style="color:white;">menu5</a></li>
</ul>
<div class="navbar-form navbar-right">
<div class="input-group">
<input type="text" class="form-control" style="width:310px" placeholder="Search" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">go</span>
</div>
</div>
</div>
Thanks.
EDIT 2 DanDavis suggestion in the comments is the way to go based on my testing. Handling the events and formatting myself is easier in this case than relying on bootstraps native formatting and functionality.
This uses only css. working demo
Add a class to the dropdown ul (.stay-open)
<ul class="dropdown-menu stay-open">
then apply style display block with !important
.stay-open {display:block !important;}
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