Bootstrap 4 Multi Level Dropdowns and Display on Hover

Posted in Code
December 13, 2017 08:03:15 PM
Published by
Leave your thoughts

Hey everyone!  I got a bit of code I wanted to share with you all that I think will help lots of people.  I love the bootstrap framework.   I mostly design all my projects and websites with it.  It just makes my life easier.  However I ran into one issue in Bootstrap 4 that was really bothering me and that is drop down navigation items.

The default functionality of bootstrap is for a click on a dropdown.  The average person however expects this to work on hover.  They do this because on mobile you can't hover.  This bothered me so I can up with a fix.

I wrote the below scripts and tested it on desktop and mobile for users.  It will provide the most optimal functionality no matter what screen the user is on.  I do not have a live demo but it is all done in HTML and CSS you do not need a webserver to see it in action.  Simply download it and open the index.html file.

Bootstrap is a great framework and with the addition of this script you will greatly increase the user experience and lessen the time required to design your web projects and websites.

Happy coding!

Bootstrap 4 Multi Level Dropdowns

Article written by:

Hi! My name is George Whitcher and I am a developer from the South Shore of MA.  When I am not busy being a dad I like to play video games, play/write music, snowboard, and skateboard.