How to make main navigation links on a Bootstrap dropdown menu clickable on desktop only and open on hover

Hi.

I’ve been building WordPress sites for awhile now and I’ve always wanted to make the top level links on a Bootstrap dropdown menu clickable. So I’m currently busy building a WooCommerce theme and thought that now is the time do do it.

I Googled for some solutions on how to do it. I hoped that there would be a solution built into Bootstrap for this but unfortunately not. So I’m going to keep this short and just get right to it.

Javascript to make top level dropdown links clickable on the Bootstrap Navigation for desktop only

Just add this to your code where you call your Javascript. It will target the bootstrap menu classes.

$(window).on("load resize",function() {
    if($(window).width() >= 768) {
        $('.dropdown-toggle').removeAttr('data-toggle');
    } else {
        $('.dropdown-toggle').attr('data-toggle','dropdown');
    }
});

How to make the Bootstrap dropdown menu show on mouse hover

Just add this CSS that overwrites your Bootstrap CSS

Normal CSS

.navbar-nav li:hover .dropdown-menu {
    display: block;
}

If you’re using LESS

.navbar-nav {
    & .li {
        &:hover {
            & .dropdown-menu {
                display: block;
            }
        }
    }
}

This article was written by Francois View Profile
Hi. I'm currently 31 years old and I'm a full time Front-End Web Developer. I love cats and I love life.... sometimes. I created this blog when I was figuring out how Wordpress works and it eventually started to get a whole lot of traffic. I'm now trying to help fellow South Africans with general how to stuff for example how to renew your car license disc and also reviews like restaurants etc. I haven't done much yet but I will soon start to do more and more. I will try to write as many blog posts as I can. I hope you enjoy this blog and don't forget to leave a comment. Oh and you're welcome to write a guest post or review. Just click on Write Guest Post on the top main menu.
Twitter | Facebook

Leave a Reply

Your email address will not be published. Required fields are marked *

fifteen + 19 =