Menu hover effect for mobile

Illdy
1

Hi,
I would like to ask if I can somehow add a hover effect for the mobile menu so that I can know what I’ve clicked? The best would be if the font color would be changing, like in the dropdown menu at the desktop view.
Thank you very much in advance!
Niki

2

hi Niki

Hope you are having a good day and thank you for your question :slight_smile:
There is no such state for the mobile devices like hover, they just use click because there is no pointer on the screens with only touch function

Thanks!
Colorlib Support Team

3

Hi,
Thanks for the quick reply.

I know it is not an actual hover effect, but on some sites if I select an item from the mobile drop down menu, the color of the selection is changed, until the page is loaded. I don’t know what the name of this effect is but I would really like to implement it on my page.

Thanks a lot and kind regards,
Niki

4

Hello there,

I hope you are doing well today.

Could you please provide a link to your website so that I can inspect it?

Best Regards,
Support

5

Hi,

Thanks!

This is the page: http://noisikertrener.hu/

Thanks in advance!

6

Hello there,

Try to use the following CSS code to add a hover effect to the menu by going to Appearance > Customize > Additional CSS and pasting it there.


@media only screen and (max-width: 992px)
.responsive-menu ul li:hover {
    background-color: red;
}

Best Regards,
Support

7

Thanks a lot. Unfortunately it is not working :frowning:

It show me an error (attached)

8

I think I’ve found a workaround!
I removed the first line (@media only screen and (max-width: 992px)) and now it seem to be working, but after a few “clicking” it’s not working again. Then a minute later it is working again :confused:

9

Now I found out that the menu hover effect only works on the below pages but not on any other and I don’t know why :frowning:
So, it works on http://noisikertrener.hu/kapcsolat-2/ and http://noisikertrener.hu/mobil/ and http://noisikertrener.hu/semmire-nincs-idom-mobil/

But it is not working on for example http://noisikertrener.hu/hogyan-kezdjem-mobil/ or any other :frowning:

Do you know how this is possible? :open_mouth: :frowning:

10

Hi @nicky456,

The CSS we gave you earlier had a syntax error and was missing a last closing brace i.e. }
Also it was targeting the hover state of links that does not exist in mobile view.

What you can do is use the active state instead i.e. replace that CSS we gave you earlier this one:

@media only screen and (max-width: 992px){
.responsive-menu ul li a:active {
    color: red;
}
}

It should turn the links red on touching them to load the page.
Cheers.