Skip to content Skip to sidebar Skip to footer

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

Solution 1:

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;}

Solution 2:

I am assuming that you are using a bootstrap dropdown, give this a shot:

$('li.dropdown').on({
    "shown.bs.dropdown": function() { this.close = false; },
    "click":             function() { this.close = true; },
    "hide.bs.dropdown":  function() { returnthis.close; }
});

The above implementation will hide the dropdown when it is clicked again. If you do not like that behavior, you can simply remove the first two lines (shown.bs.dropdown and click events) and simply return false for hide.bs.dropdown event.

Here is working proof bootply

Here is a working proof bootply that will always stay open

Post a Comment for "Keep Bootstrap Dropdown Open In Navbar No Matter What"