[Resolved] Mega Menu 2 Column Problem

Home Forums Support [Resolved] Mega Menu 2 Column Problem

Home Forums Support Mega Menu 2 Column Problem

  • This topic has 9 replies, 3 voices, and was last updated 1 month ago by Fernando.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2276874
    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 🙂

    #2276901
    Fernando
    Customer Support

    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.

    #2276904
    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.

    #2276992
    David
    Staff
    Customer Support

    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;
    }
    #2280044
    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.

    #2280067
    Fernando
    Customer Support

    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.

    #2280083
    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.

    #2280089
    Fernando
    Customer Support

    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.

    #2280117
    Willya

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

    #2280121
    Fernando
    Customer Support

    You’re welcome Willya!

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