Genesis - Mobile menu parent links not clickable

When using submenus (drop-downs) in the mobile navigation menu, the parent link only acts as an "opener" for the submenu. The parent link itself, if it links to a page, is not clickable.

If you need the parent link to be clickable, there's a simple workaround. We recommend adding a link in the submenu that leads to the same page as the parent link (i.e. Shop > Visit the Shop). This is a more functional and accessible experience for mobile users, some of whom may not realize the parent link leads anywhere at all.

How to do it

1. Go to Appearance > Menus and open the navigation menu you'd like to edit.

2. At the top right of your screen, click on Screen Options. Check the option that says "CSS Classes."

3. Add a new child link below the parent link that leads to the same location as the parent link.

(If this is confusing, here's an example: let's say your parent link leads to http://yourwebsite.com/shop. That means the new child link you add should also lead to http://yourwebsite.com/shop. The child link can say anything you'd like, such as Shop > Shop or Blog > Read the Blog.)

Note: You're welcome to stop at this step. If you'd like to hide the new child link on desktop so it ONLY displays on mobile, keep following the tutorial below.

4. Click the arrow on your new child link. That will open the menu options for the link. In CSS Classes box, type in "hide-link" as shown below.

5. Click Save Menu.

6. Lastly, go to WordPress > Appearance > Customize. Click on the Additional CSS tab at the bottom left. Paste the following code in the box:

@media only screen and (min-width: 1021px) {
  .hide-link { display: none !important; } }

7. Click "Publish" to save your changes. Here's the end result on desktop and mobile:

If you don't see the link hidden on desktop after adding the CSS code, you'll need to clear your cache.