Archived topic
mega menu in 2 columns
5 replies · Started by John MacKenzie on September 19, 2019
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!
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 :)
sorry i forgot i had taken it off, its on now
John
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;
}
awesome thanks!
You're welcome