CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3navbar
Cray
Cray

Reputation: 5483

Bootstrap navbar with hover dropdown and clickable links

I have a bootstrap navbar solution with an hover dropdown. It's something like this: http://bootsnipp.com/snippets/E7KEy

My problem is, that I need clickable links in the navbar. Every dropdown parent should be a link. At the moment, the "dropdown-toggle" class didn't allow this.

In the mobile view, I need an extra link to open the dropdown because the parent item should stay clickable.

Are there any ideas for a solution?

Upvotes: 0

Views: 1233

Answers (2)

Kawal Babra
Kawal Babra

Reputation: 26

One of the options is to use jQuery to show submenus; In a similar way how bootstrap loads menus.

Following is the code to do so and it worked very well for me:

$('ul.nav li.dropdown, li.dropdown-submenu').hover(function () {
    $('> .dropdown-menu', $(this)).stop(true, true).delay(1000).show();
    $(this).addClass('open');
}, function () {
    $('> .dropdown-menu', $(this)).stop(true, true).delay(1000).hide();
    $(this).removeClass('open');
});

Upvotes: 1

Dilip Nayak
Dilip Nayak

Reputation: 303

In css file on line number 55 change replace it with this code. 

.navbar-default .navbar-nav .open .dropdown-menu > li > a:click,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
 background-color: #ccc;
}

Upvotes: 1

Related Questions