How to make main menu item non-clickable?

[malavkarkar]

Hello!

I want to make the main menu item non-clickable as the page for the same doesn’t exist. For that I am using this code.

.menu-item-856 a {
pointer-events: none;
}

However this is also making the sub-menu items non-clickable as well. How do I go about doing this?

[tristup]

Hi Malav,

Thanks for reaching out.
It seems that your custom CSS code is disabling the pointer-events for all the a tags inside the specific class you mentioned. If you want to disable only the main menu, not the dropdown, you need to use the > in the selector. The selector will look like the following, not the one which you are using.

.menu-item-856 > a

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail One, where we answer the questions beyond normal theme support.

Thanks