Mobile dropdown links not working

For dropdown links in the menu navigation on mobile, 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 on mobile.

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: