Navigation dropdown issue, need it to work on hover

I have created my own theme from Bootstrap 3, everything went ok except for the navigation. After many hours trying ot figure out why my navigation didn’t drop down, I finally fixed and thought that was job done… (I hadn’t used a navwalker), but now I find the dropdown only works when clicked (expand and retract), and the items are not in a vertical list but horizontal (wrapping to the container).

Can anyone please advise how I change the action from click to hover, and also how do I get the sub menu to list horizontally?

Thanks Tony

I have created my own theme from Bootstrap 3, everything went ok except for the navigation. After many hours trying ot figure out why my navigation didn’t drop down, I finally fixed and thought that was job done… (I hadn’t used a navwalker), but now I find the dropdown only works when clicked (expand and retract), and the items are not in a vertical list but horizontal (wrapping to the container).

Can anyone please advise how I change the action from click to hover, and also how do I get the sub menu to list horizontally?

Thanks Tony

• navigation
• dropdown

Share Improve this question asked Jan 21, 2019 at 20:23 tony leestony lees 1 1

• This is how Bootstrap's dropdowns work. There's nothing going wrong. I strongly advise you leave it that way, because it was a deliberate choice made by very knowledgeable developers. From experience I can tell you it is basically impossible to get hover-based dropdowns to work correctly across all the types of devices that are available today (tablets, touch PCs, touch PCs connected to non-touch monitors, etc.). – Jacob Peattie Commented Jan 24, 2019 at 9:07

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -1

Please add below code inside your css file.

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }