Menu too long - how to make Mega Menu without child items?

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).

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

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.

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?

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

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.

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;
}

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

Glad to be of help

Edit: This was solved. The problem only showed in the Customizer and the menu items worked fine on the page itself.

I had the same problem with my dropdown menu being too long. I used the css below to get 2 columns which helped. But my dropdown menu items have long titles, so many of them break into two rows. The problem is that the last menu item on the left columns is divided into both of the columns. First row of the item is on bottom left column and second row is on top right column.
How could I fix this so that both rows of the item would be on the bottom of the left column?

@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;
}
}

Hi there,

can you raise a new topic where you can share a link to your site where we can see the issue.