Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] GP Mega Menu issue

Home Forums Support GP Mega Menu issue

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #444678
    Matthias

    Hi Tom & Leo,

    I’ve just updated to GP 2.0 and I love the speed improvements.

    I do have a problem with the GP Mega Menu that I haven’t been able to solve: the grandchild-menu is not visible anymore when the mega menu is expanded.

    Visitors now need to click the child-menu items to be able to see the grandchild-menu.

    I believe that’s because of this rule:

    .dropdown-click .main-navigation ul ul, .dropdown-click .secondary-navigation ul ul {
        visibility: hidden;
    }

    However, when I set it to visibility: visible; the grandchild-items don’t work as expected anymore: when I hover over one of the grandchild-items items, the child-item changes color and the grandchild items are not clickable.

    Do you have any idea what could be the issue?

    A few quick comments:
    – I’m using GP 2.0 and GP Premium 1.5.6
    – I’ve updated the GP Mega Menu css to make it compatible with GP 2.0
    – I’ve deactivated all caching and minification plugins

    Thank you!

    GeneratePress 2.0
    GP Premium 1.5.6
    #444901
    Tom
    Lead Developer
    Lead Developer
    #444931
    Matthias

    The grandchild-items are now visible again, but the links are not “clickable”: when I hover over the grandchild items, the state of the child-item changes (in Chrome and Firefox).

    #445031
    Tom
    Lead Developer
    Lead Developer

    Ahh, can you try the updated CSS now?: https://docs.generatepress.com/article/building-simple-mega-menu/

    Thanks for your help with this 🙂

    #445471
    Matthias

    Desktop works fine now, thank you!

    On mobile there are 2 issues:

    1. When opening the menu, it looks like the child-menu items are expanded by default without actually showing the grandchild-items.
    2. Hovering over the grandchild-items and trying to select one, makes all the items flicker (child + grandchild).

    I hope you see the same, if not I can make a short video.

    #445695
    Tom
    Lead Developer
    Lead Developer

    And if you remove the mega menu CSS, it goes back to normal?

    #446115
    Matthias

    Yes, when I remove the mega menu code the menu works perfect, both on desktop as well as on mobile.

    I think I found a solution for the first issue from the ones I mentioned:

    1. When opening the menu, it looks like the child-menu items are expanded by default without actually showing the grandchild-items.
    2. Hovering over the grandchild-items and trying to select one, makes all the items flicker (child + grandchild).

    In the mobile.css file of the GP theme, on line 49 there’s this rule:

    .main-navigation.toggled ul ul,
    .secondary-navigation.toggled ul ul {
    	visibility: hidden;
    }

    Adding this to my child theme’s stylesheet solved issue #1:

    .main-navigation.toggled ul ul,
    .secondary-navigation.toggled ul ul {
    	display: none;
    }

    What I haven’t been able to solve yet is the flickering of the grandchild menu’s when hovering over the child menu.

    When I remove the mega-menu code the mobile menu works as expected, so it looks like the problem is in the mega menu code block.

    Do you see the same on your installation?

    #446539
    Tom
    Lead Developer
    Lead Developer

    Think I got it fixed – can you try the updated code?

    #446646
    Matthias

    Yes, fixed! Thank you so much for your help even in the weekend.

    #447069
    Tom
    Lead Developer
    Lead Developer

    No problem! Thanks for helping me make sure the code is all working again 🙂

    #447947
    Leon

    Hi Tom,

    I was searching for making a mega menu as I want to list a bunch of links to the primary nav. I tried your code as in this link: https://docs.generatepress.com/article/building-simple-mega-menu/

    It will show 4 columns of child menu.

    Is there a way to show the child menu vertically floating to the left and grand child menu items horizontally? Like in this picture.

    I think this way it’s easier to navigate. Because have about 27 grand child menu items which are too hard to display vertically. If they can display horizontally and float left, then they can make us the width to the maximum.

    Thank you
    Leon

    #448211
    Tom
    Lead Developer
    Lead Developer

    Hi Leon,

    I think this would likely take some considerable CSS, and maybe even a custom walker for the menu. You might be better off with a more advanced solution like Uber Menu.

    #448274
    Leon

    Hi Tom,

    Thank you. I’ll try uber menu and see if I can get it work the way I want.

    Thanks
    Leon

    #449788
    Tom
    Lead Developer
    Lead Developer
    #449887
    Leon

    Hi Tom,

    Thanks for the update. I bought uber menu that day. Took 2 days to get it work the way I want. There are a Bunch of configurations to do. Feel like it is not as easy to customize as GP theme and plugins. But their support is also quick.

    Thank you very much. Every time I ask something, I get it done with your help.

    Leon

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