mega menu in 2 columns

[John MacKenzie]

related to this code
https://docs.generatepress.com/article/building-simple-mega-menu/

is there a way to make the mega menu only have 2 columns and not spam the full width of the site?

thanks!

[Leo]

Hi there,

I don’t see a mega menu currently.

Can you add it in so we can try to provide some CSS?

Let me know 🙂

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

[John MacKenzie]

sorry i forgot i had taken it off, its on now

John

[David]

Hi there,

so couple of edits to the Mega menu CSS:

Change:

nav .main-nav .mega-menu > ul {
    position: absolute;
    width: 100%;
    left: 0 !important;
}

to:

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

And change:

nav .main-nav .mega-menu>ul>li {
    display: inline-block;
    width: 25%;
    vertical-align: top;
}

to:

nav .main-nav .mega-menu>ul>li {
    display: inline-block;
    width: auto;
    min-width: 250px; /* adjust this to suit */
    vertical-align: top;
}

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

[John MacKenzie]

awesome thanks!

[David]

You’re welcome

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

[Author]

Posts