Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Keep Bootstrap Dropdown open in Navbar no matter what

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.

like image 245
NinjaBomb Avatar asked Nov 21 '22 20:11

NinjaBomb


1 Answers

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;}
like image 119
astroanu Avatar answered Nov 24 '22 10:11

astroanu