Styling Mega Menu

Hi Willya,

You can try adding this code:

@media (min-width: 769px) {
    nav .main-nav #menu-menu {
        position:relative;
    }
    nav .main-nav .mega-menu {
        position:static;
    }
    nav .main-nav .mega-menu>ul{
        width: 100%;
        top: 90%;
        border-radius: 10px;
    }
nav .main-nav .mega-menu>ul>li>a{
    position:relative;
}
    nav .main-nav .mega-menu>ul>li>a:after{
        content: "";
        background-color: #00000055;
        position:absolute;
        top: 100%;
        left: 5%;
        width: 90%;
        height: 2px;
        z-index: 999
    }
}

I know Fernando can do it perfectly for me. Thank you!

Ah, one more styling, please...

You see "Fakultas" menu inside the screenshoot I shared?

Could you write the CSS like that for me, Fernando?

Try this:

@media (min-width: 769px) {
    li#menu-item-15 > ul > li > ul {
        display: flex;
        flex-wrap: wrap;
    }

    li#menu-item-15 > ul > li > ul > li {
        width: 33%;
    }

    li#menu-item-15 > ul > li {
        width: 100%;
    }

    nav .main-nav li#menu-item-15>ul>li>a:after {
        content: "";
        background-color: #00000055;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 2px;
        z-index: 999
    }
}

It's specific for that menu item.

Thank you. It works!

You're welcome Willya!

Hi Fernando,

Sorry for open this thread again, I forgot to ask one last question.

I want to make the width of the sub menu background is only 50% for menu that only have 1 column. I've share the screenshoot to make it easy for you to understand what I mean.

Thank you.

Can you share the link to the site again?

Okay, I've shared the link again on private.

sorry, duplicate.

Try this code instead of the previous one I provided:

@media (min-width: 769px) {
    :is(#menu-item-15,#menu-item-16) > ul > li > ul {
        display: flex;
        flex-wrap: wrap;
    }

    :is(#menu-item-15,#menu-item-16) > ul > li > ul > li {
        width: 33%;
    }

    :is(#menu-item-15,#menu-item-16) > ul > li {
        width: 100%;
    }

    nav .main-nav :is(#menu-item-15,#menu-item-16)>ul>li>a:after {
        content: "";
        background-color: #00000055;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 2px;
        z-index: 999
    }
}

Just add the Menu item id if you have a new menu item with one sub menu.

Hi Fernando,

I have use that code instead of the previous one, you can see live on my website. But I am sorry, thats not what I mean.

I have shared the screenshoot of my Figma design for that one sub menu to make it easy for you to understand what I mean.

Hi there,

1. Add this CSS ( inside your @media query ):

#site-navigation .main-nav .mega-menu.mega-one-col ul.sub-menu {
    display: block;
    width: auto;
    left: unset !important;
}
#site-navigation .main-nav .mega-menu.mega-one-col ul.sub-menu li {
    width: auto;
}

Then where you want that single column design, select the top parent menu and give it a CSS Classes of: mega-menu mega-one-col

Thank you, David. It works!

Glad to be part of GP family : )

Glad we could be of help!