Mobile Menu Dropdown Parent Link not Clickable

With dropdown links in the navigation on mobile, if the parent link leads to its own page as well, our recommendation in that situation is to add a child link that leads to the same page as the parent link (eg. Shop > View Shop). We feel it's the best user experience, because otherwise it's possible that some mobile users could not realize that the parent link leads anywhere.

If you don't like the idea of having the extra link appear on desktop, and instead want it to only appear on mobile, there is some simple code to make that happen.

This is the code that you can add into your child theme or the Custom CSS box under Theme Options:

@media screen and (min-width:768px) {
  .hide-on-desktop {display:none}
}

Then when you add the new item to your navigation menu, just ensure to add "hide-on-desktop" into the CSS Classes field.

If the CSS field is not available, you can add the option from the tab at the top of the screen titled "Screen Options".


Menu Settings:

Desktop View:

Mobile View: