Drop Down Issue - Please Help!

[thebeautybudget]

Ok - so when using drop down navigation in the main walker nav that is included in the theme there is an issue.

Issue #1 -

You actually have to click the parent nav to get the sub nav to show

Issue #2 -

The parent nav is a parent category so should have its own page but it isn't clickable example:

Shopping
-Fashion
-Accessories
-Makeup

when hovering over shopping should the 3 sub categories not automatically show? And shopping should still be clickable but it isnt... by clicking on shopping it only shows the 3 sub nav pages you cant actually click on shopping.

[vinayraghu]

I have faced a similar issue before for a site I was designing.

The dropdown is intentionally made to work on click rather than on hover. Hover events can be quite frustrating on touch devices. More on the design decision here by Mark Dotto - Bootstrap explained dropdowns

Answer to both your questions are available here on stack overflow

How to make Twitter Bootstrap Menu work on hover

When you make the dropdown appear on hover, you will face an issue.

The dropdown will appear but before you could select any of the links in the menu, the dropdown will disappear.

To resolve that, you need to remove the 1px margin.

Essentially, you append the below lines to your dropdown.less and recompile your stylesheet. You should be ready.

//Open Drop down on hover 
ul.nav li.dropdown:hover > ul.dropdown-menu{
display: block;
}
//Remove the margin 
.navbar .dropdown-menu {
 margin-top: 0px;
}

To make the parent nav clickable for Issue#2, strip the anchor tag for the parent nav link. Remove the class and data-toggle and have it as below:

<a href="link/to/your/parent">
    Dropdown
    <b class="caret"></b>
</a>

[websiag]

how can i remove the "class" and "data-toggle"?