Mobile Menu Dropdown Parent Link not Clickable

*Please note, this article only applies to the standard default theme header. It does not apply to the Global Templates feature*

When you have dropdown links in the menu navigation, if the parent link leads to its own page as well, the way it works in the mobile menu script, the parent link does not come through when viewed on mobile. This is because it opens the dropdown instead of leading to the page.

Our recommendation in that situation is to add a child link that leads to the same page as the parent link. For example:

Home
Shop
- View Shop
- Featured Products
- Bestsellers
Contact Us

In the above example, the 'View Shop' link would lead to the same place as the 'Shop' link.

We feel it's the best user experience, because otherwise it's possible that some users could not realize that the parent link leads anywhere.

Optional next step

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: