Disable Menu Button

Store Design
, ,

Topic summary

A user wants to disable clickability for certain menu items in their online store—specifically making the “Shop” button function only as a dropdown trigger and preventing subheadings (Clothing, Shoes, Featured) from being clickable links.

Proposed Solutions:

  • One suggestion involves editing navigation settings to replace links with “#” symbols
  • A more effective solution uses CSS code to disable pointer events on specific menu elements

CSS Implementation:
The recommended approach adds pointer-events: none; to:

  • Menu items with children (.menu-item.has-children.menu-item.has-megamenu > a:first-child)
  • Megamenu column headings (.menu-columns__heading)

This CSS prevents the elements from being clickable while maintaining their visual appearance as dropdown triggers. The original poster confirmed this solution worked successfully.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi,

Is there a way to disable some headings in my menu so they are no clickable?

  1. I would like the “Shop” Button on the top to be a dropdown menu only and not something that can be clicked on.

  2. The Subheadings Clothing, Shoes and Featured, I would also like to not be clickable.

https://theothelabel.com/

2

@JoeyRoo - please check navigation settings, edit the link to put # instead of any other text or link into it and it should work as per your need

3

Hi @JoeyRoo

Adding # to the links will still change the URL and the links will remain clickable. You can make the subheadings and the shop button not clickable by adding the following CSS to your theme code.

.mega-menu-columns__heading {
    pointer-events: none;
}
li.menu-item-has-children.menu-item-has-megamenu > a:first-child {
    pointer-events: none;
}

Do let me know if you need help adding the code to your theme.

Thanks.

4

Perfect! Appreciate the help :slightly_smiling_face: