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 navigator drop-down
  • dropdown hover navigation in bootstrap
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1832 nWet332HPDzH01Fg9kzDGyp6Rzuw2xOppSMg_Ed8De1D5GEta6pWSI3-1p4du99M 1ff1a1baa3aac639e098a79d6db9dd7254cb9bdb&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1837 axfkLs6POw7t6tPtJaI9LipPuhTnAZ3P6h8cwrPYDjMcGPWX1uTHBMISnuanzm7B eada620059ad326e41f080346468d51816fc355e&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme

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.