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 3 navbar hover
  • bootstrap hover toggle
  • how to make navbar menu on mouse touch open in bootstrap
  • navbar hover effect in bootstrap
  • asp net toggle visability navbar item
  • on mouse over bootstrap
  • hover over bootstrap menu item text in lower browser

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.