[Support request] Menu too long – how to make Mega Menu without child items?

Home Forums Support Menu too long – how to make Mega Menu without child items?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1382117
    Sonja

    Hello,

    on this site, the Menu “Hersteller” became very long, so that i can´t see it on my monitor anymore.

    I would like to split this off in some columns. Or is there a better solution?

    I have read the documentation about the mega menu, but I don´t know how to make it, Because in this doc, the Menu has a Parent Item, a child item and a grandchild item.

    But in my case, i have no child item, which would be a mega menu heading.

    I have no headings, only grandchild items.

    So how can i make this?

    #1382335
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    If having a lot of main menu items is necessary, you may want to play with a mega menu plugin. There are quite a few of them out there worth checking out.

    In my opinion, it’s better to simplify your main menu and add links elsewhere like your footer (like we do on this site).

    #1382339
    Sonja

    OK, but can I make the Mega Menu from you documentation without child items?

    #1382342
    Tom
    Lead Developer
    Lead Developer

    No – that method requires child items and is a very basic concept. Mega menu plugins do a much better job, although I’m not sure if they require child items or not.

    #1382635
    Sonja

    Hi Tom,

    you wrote: “If having a lot of main menu items is necessary, you may want to play with a mega menu plugin.”

    But the main menu items are not my problme. My problem are the many child items. You can see them if you click at the “Hersteller” main menu item.

    Did you mean that in yor answer?

    #1382771
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

    @media(min-width: 769px) {
        .main-navigation ul li.mini-mega ul {
            column-count: 2;
            width: 360px;
        }
    
        .main-navigation ul li.mini-mega ul li {
            break-inside: avoid-column;
        }
    }

    Then give the Parent menu item a CSS class of mini-mega
    https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

    Then set the Dropdown alignment to Left in Customizer > Layout > Primary Navigation

    #1382916
    Sonja

    Hi David,

    that works, thanks a lot!

    I don´t know, if this change has something to do with that, but now on mobile view, i can not scroll down if click on the parent menu item.

    #1382941
    David
    Staff
    Customer Support

    No its not related.
    The Mobile Menu is not best suited for long menus.

    The best method is to use the Off Canvas Panel for Mobile:

    https://docs.generatepress.com/article/off-canvas-panel-overview/

    OR – a you can try this CSS on your current menu:

    .main-navigation.toggled .main-nav>ul {
        max-height: calc(100vh - 60px);
        overflow-y: scroll;
    }
    #1382964
    Sonja

    OK, thanks David. I use the Off Canvas Panel for Mobile then. Good idea. I never saw this before 🙂

    #1382974
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.