How to create a non-clickable top-level menu item

What is the correct way (without using ‘#’ in a Custom Link) to create a non clickable top level menu item?

For instance: In the example below, the ‘Shop’ is functionally just a dropdown and is not clickable but the two child ‘Category’ menu items are clickable.

Shop
— Category 1
— Category 2

Many thanks

[Artem Temos]

Hello,

Thank you for reaching out with your inquiry. To make a top-level menu item non-clickable without using ‘#’ in a Custom Link, you can achieve this by disabling the click function with custom CSS.

Here’s an example of how you can apply custom CSS to make the ‘Shop’ menu item non-clickable:

.menu-item a[href=""] {
   pointer-events: none;
   cursor: default;
}

You can add this custom CSS to your WordPress theme by navigating to Theme Settings -> Custom CSS.

Please note that this approach assumes you’re creating a Custom Link in the menu with an empty URL for the top-level item. If you need further assistance or have additional questions, feel free to ask.

Kind regards

• This reply was modified 1 month ago by Artem Temos.

[Design_LSB]

I am unable to leave this field blank. Please advise further (see attachment).

Many thanks

• This reply was modified 2 weeks, 6 days ago by Design_LSB.

Attachments:

You must be logged in to view attached files.

Hello,

If you’re encountering difficulties leaving the URL field blank, here’s an alternative approach. You can enter javascript:void(0); in the URL field when creating the Custom Link for the top-level menu item. This will effectively prevent the link from being clickable while still allowing you to create a non-clickable menu structure.

If this issue persists or you have additional questions, please don’t hesitate to reach out for further assistance.

Kind regards

Issue resolved. Thank you.

You are always welcome. Feel free to contact us if you have any further questions.

[Author]

Posts