[Resolved] Mega Menu on iPads

[Tom]

Hi GeneratePress Team,

I’ve set up a Mega Menu using this documentation: https://docs.generatepress.com/article/building-simple-mega-menu/

The menu works well on desktop and on mobile. However, it is not working properly on two different iPads we tested the site on.

The menu appears when you click the parent item, but when you click on any link in any column, nothing happens.

The site is: http://jerseyhoregerman.com

And the link with the Mega Menu is the “Sprechen (Speaking)” link.

Thanks in advance for the help,

Tom

[Leo]

Hi there,

Your site isn’t loading for me.

It says This site can’t be reached.

Can you double check?

[Tom]

I misspelled the site. Sorry about that.

It is: http://jerseyshoregerman.com/

[Tom]

And in case it’s helpful to know, I changed one item of the CSS:

nav .main-nav .mega-menu > ul > li:hover > a,
nav .main-nav .mega-menu > ul > li:focus > a,
nav .main-nav .mega-menu > ul > li[class*=”current-“] > a,
nav .main-nav .mega-menu ul ul {
background-color: transparent !important;
color: inherit;
}

I changed “focus” to “none” so that the column title would not change color.

[Tom]

Update:

We did some more testing.

On desktop there is no problem. You can click on any item in the mega menu.

On mobile, the column headings are links that must be clicked in order to see that column’s choices. This makes sense. When on mobile, the choices need to be more manageable.

On the iPad it seems to be an odd mix between the two. It’s requiring us to click a column title in order to be able to choose a link within that column. But since the look of the site on the iPad is similar to the desktop, it’s not clear that this is what needs to be done.

[Leo]

Hmm the CSS shouldn’t have any effect on mobile as it’s wrapped in media query.

What if you replace:
@media (min-width: 768px)
With
@media (min-width: 1024px)

[Tom]

Tried it. No effect.

I’ll leave it at 1024px for now. Let me know if you want to change it back at some point.

[Leo]

Hmm I just tested your site on mobile and it worked perfect to me.

Can you try clearing browser cache?

I’ll ask Tom to test on iPad as well.

[Tom]

Yes, the mega menu is working well on mobile.

The only problem is that the menu does not function as we need it to on iPads.

We all cleared our caches. That did not solve the problem.

[Tom]

I found a solution.

I navigated to: Customize > Layout > Primary Navigation

I then selected: Navigation Dropdown

I then changed the option from “Hover” to “Click – Menu Item”

This allows an iPad user to click directly on a Grandchild item without clicking on a Child item.

[Leo]

Glad you found the solution!

[Author]

Posts