[Resolved] Create custom mega menu

[Michael]

Hi guys

I aim to create a custom mega menu for a client’s website.
So I started with this article.

However, I can’t make it work using the CSS class in the menu.
I must be doing something wrong I guess…

So my menu has the following structure:
6 parent items
-> Each of them has between 3 and 5 child items

So I have no grandchild items – is that a problem and do you know what I am missing here to build a mega menu?

Thanks in advance
Michael

[David]

Hi there,

the mega menu structure does require Grandchildren.
As the child item acts as the ‘label’ for the mega menu columns.
And if there are no grandchildren then there is nothing to go inside the columns.

[Michael]

Thank you David.

I have altered the menu now, having one parent item (CSS class mega-menu assigned), four child items and grandchild items there as well.

However, it does not create a mega menu yet (see URL in my original post).
I don’t understand what I am doing wrong.

Thanks again for your support.

[David]

You have the Off Canvas Panel enabled for desktop on that site – do you want a Mega Menu inside that ?
As the doc we provide works with the default navigation, not the off canvas

[Michael]

Ah I see, yes the mega menu inside the off canvas would be great.
But if the docs are for a different case, no worries – was not aware about that.

Thanks

[David]

Can you send the link to your site again ? And i can take a look at whats possible.

( Note – when a topic is marked as resolved, we auto delete any Private Information content fro the topic ).

[Michael]

Here is the link again in the other section – thanks a lot for your effort.

[David]

Try this CSS:

@media(min-width: 769px) {
    /* Set width of inner menu and add top padding*/
    #generate-slideout-menu.do-overlay .inside-navigation {
        padding-top: 100px;
        max-width: calc(100% - 40px);
    }
    /* Align menu items to top and set 20px gaps */
    #generate-slideout-menu.main-navigation .main-nav>ul {
        align-items: flex-start;
        gap: 20px;
    }
    /* remove drop down toggle on parents */
    #generate-slideout-menu .main-nav>ul>li.menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
    /* Make it 4 columns */
    #generate-slideout-menu.main-navigation .main-nav>ul>li:not(:first-child) {
        width: calc(25% - 20px);
    }
    /* Always show children */
    #generate-slideout-menu.main-navigation ul ul {
        display: block !important;
        height: auto;
        opacity: 1;
    }
}

It don’t require any of the steps in that doc. It should work with your current setup

[Michael]

Wow David – amazing, thank you so much for this snippet!
Did pretty much what I needed, just had to improve it a little bit with some aligning, margins and the logo inside the menu.

Now it just looks amazing I think.

Thanks a lot.

[David]

Awesome – glad to be of help!!

[Author]

Posts