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
  • anything
  • bootstrap highlight navbar item on hover
  • bootstrap navigation dropdown toggle on hover
  • toggle navigation when you click out of nav

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.