---

Search posts under Bootstrap:

---

Disabling nav hover dropdown in small screen in Bootstrap

How to disable nav hover dropdown in small screen so that it works on click?

To disable nav menu hover dropdown in small screen so that menu dropdown works when user clicks on the nav menu, write below code in the custom .css file.

@media (min-width: 767px) 
{
    ul.nav li.dropdown:hover > ul.dropdown-menu 
    {
       display: block;
    }
}

Above code snippet instruct the browser that ul.nav li.dropdown:hover > ul.dropdown-menu works only when the screen size of the user is 767px and more. So for screen greater than and equal to 767px the nav menu dropdown works on the hover however for the lesser screen size, the nav menu bar works with the default behavior written in Bootstrap ie. onclick.