Bootstrap 3: How to Enable Hover and Toggle for Nav

BootstrapBy default, Bootstrap 3’s navigation has menus toggle’able — you click to have them open / show, and click to have them shut (hide).

Wouldn’t it be nice to also have menus open through hovering your mouse over them?

Luckily, it isn’t complicated to do!

And the best part? It only takes minor CSS to achieve this effect.

Use the below CSS to have both toggling and hovering for menus.

.dropdown:hover .dropdown-menu {
    display: block;
 }

Told you it was simple.

Bootstrap 3 is pretty awesome, by the way. It is one of the better mobile-first frameworks out there. Check it out if you haven’t!

Incoming search terms:

  • Bootstrap3:HowtoEnableHoverandToggleforNav|AGeekandHisBlog
  • bootstrap menu hover
  • bootstrap dropdown hover
  • bootstrap hover toggle
  • how to display the div when mouse over on the navbar-toggle button using css
  • How to work dropdown mouse over when its in mobile view using bootstrap
  • navbar hover effect in bootstrap
  • navbar toggle bootstrap mouse over
  • how to make bootstrap navbar-toggle button on hover rather than click during responsive
  • How to make menu buttons expand when mouse over

Comments

  1. By 11bits

    Reply

    • By Mike H

      Reply

  2. By Eric

    Reply

    • By Michael Haberle

      Reply

    • By Sahoo

      Reply

  3. By Raj

    Reply

    • By Michael Haberle

      Reply

      • By Raj

        Reply

        • By Michael Haberle

          Reply

          • By Raj

          • By Michael Haberle

  4. Reply

  5. By Bill Kurtson

    Reply

  6. By Horus Acosta

    Reply

  7. By Vinod

    Reply

  8. By HT

    Reply

  9. By khaitawng

    Reply

Leave a Reply

Your email address will not be published.