Bootstrap Dropdown Active Open On Hover And Link On Click

I have been trying to modify django-oscar's navbar menu. http://latest.oscarcommerce.com/en-gb/ What I can't figure out is that the menu 'browse store' remains open on page load on

Solution 1:

The reason the home menu is doing that is because you have a atribute of open on the <li class="dropdown active" and on the other pages you don't, I just checked the site and that is forcing the menu open.

About your issue with it not behaving the same as the other pages and opening on click. This is becuase you forgot to add the data-toggle="dropdown" on the a tag just beneath <li class="dropdown active". The menu code should be as per the following on the homepage:

<ulid="browse"class="nav"><liclass="dropdown active"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">Browse store<bclass="caret"></b></a><ulclass="dropdown-menu"data-navigation="dropdown-menu"style="width: 212px;"><li><atabindex="-1"href="/en-gb/catalogue/">All products</a></li><liclass="divider"></li><liclass="dropdown-submenu"><atabindex="-1"href="/en-gb/catalogue/category/books_1/">Books</a><ulclass="dropdown-menu"><li><atabindex="-1"href="/en-gb/catalogue/category/books/fiction_2/">Fiction</a></li><li><atabindex="-1"href="/en-gb/catalogue/category/books/non-fiction_4/">Non-Fiction</a></li></ul></li><liclass="divider"></li><li><ahref="/en-gb/offers/">Offers</a></li></ul></li></ul>

---

You wanted to have it open on hover, i think yo ucan look into using JQuery and maybe checking if the menu has been hovered on and then adding the open class like this:

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

---

Good Luck