Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Mega Menu on iPads

Home Forums Support Mega Menu on iPads

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #479572
    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

    GeneratePress 2.0.2
    GP Premium 1.5.6
    #479688
    Leo
    Staff
    Customer Support

    Hi there,

    Your site isn’t loading for me.

    It says This site can’t be reached.

    Can you double check?

    #479693
    Tom

    I misspelled the site. Sorry about that.

    It is: http://jerseyshoregerman.com/

    #479836
    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.

    #479897
    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.

    #479909
    Leo
    Staff
    Customer Support

    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)

    #479926
    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.

    #479950
    Leo
    Staff
    Customer Support

    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.

    #480355
    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.

    #480373
    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.

    #480418
    Leo
    Staff
    Customer Support

    Glad you found the solution!

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.