[Resolved] Mega Menu 2 Column Problem

[Willya]

Hi,

I have created a mega menu (I have included the link privately) on the parent item: “Penelitian”.

I wanted the “Panduan” child item to be right under the “Penelitian Mendalam” child item, but what I see now is that there’s a huge gap between the two.

Please help again 🙂

[Fernando]

Hi Willya,

This is what I’m seeing from my end: https://share.getcloudapp.com/wbuXQe9m

There’s a menu item between the two. Is this what you’re seeing? Or, are you referring to something else?

Can you take a screenshot to give us a better understanding of the issue?

Hope to hear from you soon.

[Willya]

Hi Fernando,

Sorry, I just made a change. It shouldn’t be like that, but I’ve reverted the changes as before.

Please check back from your end.

[David]

Hi there,

you’re using CSS Grid tom create just columns in the Mega Menu. So the CSS Grid auto creates the rows for you.
In order to fix that, we can tell each sub menu which ‘row’ we want it to occupy.

Try adding this CSS:

nav .main-nav .mega-menu>ul>li:first-child {
    grid-row: 1;
}

nav .main-nav .mega-menu>ul>li:nth-child(2) {
    grid-row: 1 / 3;
}

[Willya]

Thank you, David! The problem was solved with the addition of the CSS code you provided.

So, this is the CSS Code I use in my mega menu:

@media (min-width: 769px) {
    nav .main-nav .mega-menu {
        position: static;
    }

	nav .main-nav .mega-menu>ul>li:first-child {
    grid-row: 1;
}

nav .main-nav .mega-menu>ul>li:nth-child(2) {
    grid-row: 1 / 3;
}
	
    nav .main-nav .mega-menu > ul {
       display: grid!important;
    grid-template-columns: 50% 50%;
			    position: absolute;
    width: 110%;
    left: 0 !important;
    }

    nav .main-nav .mega-menu > ul > li > a {
        font-weight: bold;
    }

    nav .main-nav .mega-menu ul .sub-menu {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        width: 100%;
        box-shadow: 0 0 0;
        left: 0;
        height: auto;
        pointer-events: auto;
        transform: scale(1);
    } 

    nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }

}

I noticed that there is a problem when I hover the mouse to mega menu. Please look at the screenshoot on this link: https://www.screencast.com/t/Ufe8Y7h1Ynm
All sub menu appear when I hover its main-menu.

[Fernando]

Hi Willya,

Can you try adding this CSS in Customize > Additional CSS?:

div#primary-menu {
    z-index: 999999;
}

Kindly let us know how it goes.

[Willya]

Hi Fernando,

Thanks! The code works nicely.

But, how about this problem: https://www.screencast.com/t/XJ2flinNHU ? All sub menu appears when I hover the main-menu even though I dont click the menu item yet.

[Fernando]

I see. Can you replace this code you have:

nav .main-nav .mega-menu > ul {
    display: grid!important;
    grid-template-columns: 50% 50%;
    position: absolute;
    width: 110%;
    left: 0 !important;
}

With this:

nav .main-nav .mega-menu > ul.toggled-on {
    display: grid !important;
    grid-template-columns: 50% 50%;
    position: absolute;
    width: 110%;
    left: 0 !important;
}

Kindly let us know how it goes.

[Willya]

Wow, the problem is gone now! Thank you very much, Fernando!

[Fernando]

You’re welcome Willya!

[Author]

Posts