[Resolved] Styling Mega Menu

[Willya]

Hi, I’m designing a mega menu in Figma and want to create it in GeneratePress.

The Figma screenshoot and link to my website have attached to “private information” form.

To start with, I’ve added the css from this tutorial: https://docs.generatepress.com/article/building-simple-mega-menu/

Please guide me how to style it like the design on my Figma.

Thanks.

[Fernando]

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

[Willya]

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?

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

[Willya]

Thank you. It works!

[Fernando]

You’re welcome Willya!

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

[Fernando]

Can you share the link to the site again?

[Willya]

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

[Willya]

sorry, duplicate.

[Fernando]

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.

[Willya]

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.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Willya]

Thank you, David. It works!

Glad to be part of GP family : )

[David]

Glad we could be of help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts