Ritual Theme, disabling the subcategory title so that it is not clickable

Technical Q&A
1

I have sub category titles that should not be clickable and act as titles of the subcat. I only want to effect the desktop menu because in mobile the titles act as clickable drop downs. The words ‘Bong Materials’ are the example in the image. How would I accomplish this?

Screenshot (275)
Screenshot (275)1920×1200 173 KB

2

@ABdev1 please go to mega menu app and check if you can remove link from this word and in that place you can put “#” , so link will be disabled, but if mobile is sharing the very same menu then it will affect mobile too

3

Hi @ABdev1

Try to add this code to your Header section > Custom CSS setting. Or if it does not work for some reason in your assests/base.css file

@media screen and (min-width: 990px) {
    .mega-menu__link:has([alt="Bong Materials"]) {
        pointer-events:none;
    }
}

Note, this is not ideal as it targets the image alt that you may change over time. But it could be done with targeting href, maybe.

4

In the Ritual theme, those subcategory titles are rendered as regular links by default, so to make them non-clickable on desktop only, you can override the link behavior with a small CSS tweak.

Add this to your theme’s custom CSS:

/* Disable click on desktop only */
@media (min-width: 768px) {
  .your-menu-class a[href="/your-subcategory-url"] {
    pointer-events: none;
    cursor: default;
  }
}

Replace the class and URL with the ones used in your menu.
This keeps the title unclickable on desktop, but still clickable on mobile where it acts as a dropdown trigger.

This is the simplest way to turn a menu item into a visual title without breaking the mobile menu.