When the hamburger menu is open it automatically displays sub-menu items. That’s fine, except the main menu item is also clickable. And when you click it, you get a page which displays the sub-menu items as links. But those links aren’t clickable - they don’t work.
Question one - is it possible to make the main menu item unclickable? So that only sub-menu items are clickable. Needs to work on only for those menu items that have sub-menus so it doesn’t make all main menu items unclickable.
or
Question 2 - if you can’t make the main menu heading for a menu item with sub-menus unclickable, how do you make the links on the page it goes to actually work?
Thanks for your question. I understand your goal, but unfortunately, there is no option for this without a major customization of the menu functions. If this feature is essential for you, I would recommend using a third-party plugin.
Great questions, and I appreciate your attention to detail when it comes to menu behavior. Let’s tackle both scenarios:
Making the Main Menu Item Unclickable (WordPress): If you’re working with WordPress, there’s a straightforward way to create a non-clickable main menu item while keeping the sub-menu items clickable. Here’s how you can achieve this:
Go to your WordPress dashboard.
Navigate to “Appearance” and then “Menus.”
In the “Menus” editor, look for the “Custom Links” section.
Add a custom link with any label you want (e.g., “Explore More”) and put a “#” symbol in the URL field.
Save the menu.
Now, edit the newly added menu item in the “Menu Structure” section.
Delete the “#” from the URL field, leaving it blank.
Save your changes.
Voilà! You now have a non-clickable main menu item that displays the sub-menu items as expected. This approach works well when you want to create an anchor-like menu item without an actual link.
Making Links on the Page Work (CSS Solution): If you’re dealing with a situation where the main menu item is clickable but the links on the page it leads to aren’t working, you can use CSS to target specific menu items. Here’s how:
First, make sure you have a class assigned to the unlinked menu item (let’s call it “unclickable”).
In the WordPress Menus editor, click the “Screen Options” tab at the top-right.
Ensure that the “CSS Classes” option is checked.
Close the “Screen Options” section.
Click on the unlinked menu item and add the class “unclickable.”
Now, you can use custom CSS to style this menu item. For example:
.unclickable a {
pointer-events: none; /* Disable click events /
cursor: default; / Show a default cursor (not clickable) */
}
Adjust the styling as needed to match your design.
By applying this CSS, you’ll prevent the links within the unclickable menu item from being clickable, while still allowing the main menu item itself to be clickable.
Remember, these solutions are specific to WordPress, but similar principles can be applied to other platforms as well.