How to make an Unclickable Menu Item Text change color when hovering?

[miamax]

In order to have two particular menu items unclickable, I created custom links in Menus:

URL: #
CSS Classes: unclickable

 

and then placed this code in Custom CSS / Global CSS:

.unclickable > a {
pointer-events: none;
}

 

https://www.dwellinthegarden.com/pickfair/

It works. “Boot Trays & More” and “Gifts For Gardeners” now are non-clickable.

 

 

 

But now I want the text to change to “white” upon hover.

You can see that “Needlepoint Belts” (which is clickable) changes to white upon hover.

 

 

I want “Boot Trays & More” and “Gifts For Gardeners” text to change to white on hover.

I tried placing this code in Custom CSS global:

.unclickable > a {
pointer-events: none; hover color: #FFFFFF;
}

 

That doesn’t work.

Is there a way to do this?

 

Thank you.

[User]

Can’t test it here, but does

.unclickable > a {
pointer-events: none;
}
.unclickable > a {
hover color: #FFFFFF;
}

Work?

Regards!

[scrambler]

The rule for hover would have been

.unclickable > a:hover {color:white;}

Put the pointer event none disable that setting.

I will look in another way to disable the link

[scrambler]

Here the proper way to do it

How to Make a Non Clickable Menu Item in WordPress – JoshHall.co

Basically create a new menu item with URL #

Then on the right side where the new menu item appears with all its options opened, remove the # from the URL box

 

[miamax]

This did not work to change the text color when hovering:

.unclickable > a {
pointer-events: none;
}
.unclickable > a {
hover color: #FFFFFF;
}

 

 

This did not work, either:

.unclickable > a:hover {color:white;}

 

 

But this works, from the JoshHall.co link you gave me:

.unclickable > a:hover {
cursor: default !important;
}

 

 

Yay!

Thanks so much for your responses!

[scrambler]

Would be so much easier and cleaner to follow the proper method I referenced for non clickable items 🙂

[miamax]

But that’s exactly what I did, and it works!  🙂

 

(Someone had posted the CSS in JoshHall.co comments.)

[scrambler]

No the easiest way was to simply remove the URL from the menu item in Appearance > Menu

[Author]

Posts