Top level menu open automatically on mouse hover rather than click

Dazzling
1

Hi there,

As per the subject, How can I make the top level menu open and show sub menu items on hover, rather than click?

Please advise,

George

2

Hello?

3

Add this code to Appearance >> Theme Options >> Other >> Custom CSS. This CSS code will make sure that submenus opens on hover.

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

Let me know if this helps.

4

Hi Aigars,

Thank you for getting back to me. That works fine with Desktop version but when scaled down to Mobile size, it messes up the mobile menu when you hover over.

I still want the mobile menu to open on hover but not how it is opening when its set to display:block.

Thank you.

George

5

Mobile menu and hover. These things can’t be used in the same sentence. Show me how you can hover with your finger on mobile? :slight_smile:
If you are testing things with Chrome Dev tools or other of course you are still using cursor but that’s now how the mobile actually works.

But if you want to style something only for some specific device screen size then you can use CSS media queries.

A basic example would be like this:

@media (min-width: 767px) {
  ul.nav li.dropdown:hover ul.dropdown-menu {
    display: block;    
  }
}

This code would make the same styling but only for devices wider than 767px.

6

Hi Aigars,

Yes, Apologies that was a silly thing for me to say! My bad :slight_smile:

What I mean is that the Top Level Menu is for example “Services”. I want that to link to a “Services” page but then also show dropdown items under it showing what services? If that makes sense. Not sure how to do this on Mobile Menu, unless I don’t use the dropdown and just click through to services page and have links to each seperate service on that page.

George

7

Hi georgeoz,

I have a similar problem as you mentioned. Did you find a solution.Maybe we can use a fully expanded mobile menu?

Varun

8

I have the same issue and have been searching for over days :confused:
I was going to take a menu from another of colorlib’s themes (sparkling) but i’m not quite sure how to do that as i don’t have access to the ftp server and cannot setup a child theme to replace the menu.
If anyone has any solution i would be glad to know it