[Glen Pavelich]

My top level menu items look clickable because the little hand appears when you scroll over it. This is confusing.
Is there code to take the hand away for only the top level. Removing the # from the menu item doesn’t do it.

Update

I made a class for the items called unclickable and added:
.unclickable > a:hover {
cursor: default;
pointer-events: none;
}

But there is still a pointer – can you assist with removing that?

[Skandha]

@fireflywebs: Go to => Appearance => Customize => Additional CSS and add the following CSS
Code.

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

Let me know if this is what you want!
Kind Regards,
Skandha

[Glen Pavelich]

That didn’t do the trick. I would like the top level items, which have a drop down menu, to not have the pointer. Is this possible?

See

https://tangledgardenherbs.com/shop/

I have this code in place at the moment

.unclickable > a:hover {
cursor: default;
pointer-events: none;
}
#menu-primary .unclickable > a {
pointer-events:none;
}

[Skandha]

@fireflywebs: Remove the code you have at the moment and try adding the following CSS Code.

#menu-primary .menu-item-has-children > a {
	pointer-events:none;
}

Let me know if this is what you want!
Kind Regards,
Skandha

[Glen Pavelich]

No, just the opposite. I want the children to work but not the top item for those that DON’T have children.
Is this possible.
When I applied that code the children had a crossed out circle over them.

[Skandha]

@fireflywebs: The previous code disabled pointer on the top menu item which had children. Isn’t that what you wanted? I don’t see any children item having crossed out circle over them. Can you please explain?

Kind Regards,
Skandha

[Glen Pavelich]

No the crossed out circles don’t appear because I couldn’t leave it that way. This is a live site.
I didn’t leave the code you gave me applied after my test revealed that it caused the children to be unclickable, and with crossed out symbols over them.

I see I made a major error in my last messages. Correct here:

“I want the children to work, and have pointers, but not the top item for those that DO have children.
Is this possible?”

The ‘shop tab’ and ‘tea room tab’ don’t have children, so as top level, they should work as normal.

But all the others have children and so I don’t want the top level item of those ones to have a pointer.

tangledgardenherbs.com

Thanks. I have seen this on other sites. For instance on this one. http://masteringalchemy.com/

[Skandha]

@fireflywebs: The following code is working as the way you want at my end.

#menu-primary .menu-item-has-children > a {
	pointer-events:none;
}

So with this code the pointer is not showing up when you hover over HOME, THE GARDEN, OUR PRODUCTS, ON-SITE WEDDINGS, EVENTS & UPDATES menu items. Isn’t this what you wanted?

Let me know if it works out!
Kind Regards,
Skandha

[Glen Pavelich]

Yes, that is what I wanted but the code does not do it. The pointer still appears. There is no hand, but there is still the pointer.

My apologies on the other issue about the child-menu-items having crossed out circles over them when this code was applied…. This

does

happen, but ONLY when I am in the Customization / Additional CSS view….so I didn’t publish it before thinking it was going to create a problem. However,
I see that this does not happen when actually published and viewed live on the browser.

So…I have published the code provided in ‘additional CSS’ BUT you can see that it is not having any effect.

[Skandha]

@fireflywebs: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#menu-primary .menu-item-has-children > a {
	cursor:text !important;
}
#menu-primary .unclickable > a {
	pointer-events:unset;
}

Let me know if this is what you want!
Kind Regards,
Skandha

[Glen Pavelich]

Just got around to trying this. Sorry.
This code didn’t make any difference. It is applied to the tangledgarden.ca site and there is still a pointer on the top level menu items with children.

[Skandha]

@fireflywebs: Remove the previous CSS Code and add the following.
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.menu-item-has-children > a, .menu-item-has-children {
	cursor:none;
}

Let me know if this is what you want!
Kind Regards,
Skandha

[Author]

Posts