Retain hover styling for unclickable parent headers


I’ll start with the example to make my question easier to understand. I’ve made the parent links for Sortiment and Tjänster sections on top bar navigation unclickable by adding the following CSS which was one of the suggested approaches on a previous question to a similar topic on this forum:

li#menu-item-79 > a,
li#menu-item-80 > a {
	pointer-events: none;
	cursor: pointer;

This, however, had a side-effect of not highlighting the links with fancy borders on hover which my client really wants, so I’d like to make them work again. It should be possible because I’ve used the same trick on the Projects widget on the home page (Inspirera) by adding the following CSS:

.project-title a {
	color: #fff;
	text-decoration: none;
	pointer-events: none; /** custom */
	cursor: default; /** custom */

The two custom properties alone achieved the desired behaviour on that widget, but behave very differently on the navigation bar and I cannot seem to work out why, so any help would be greatly appreciated.

Please let me know if I can provide any more information.

Thanks in advance.

Hello Vladimir,

Why don’t you create linkless menu items, custom link menu items with # as a link?

Here is detailed explanation:

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

Sorry for the delayed reply - I must have missed your message. The link you provided is exactly what I was looking for, thank you very much for helping with this.

Have a good day!


You are welcome Vladimir!

And have a good day as well :slight_smile:

Kind Regards, Roman.