Archived topic
Mobile Menu in two columns
5 replies · Started by Baz on October 27, 2021
Hi, I'm planning on having 8 menu items in the primary navigation, so have decided to change the break-point to show the hamburger icon at all times.
What I would ideally like is for the dropdown menu to be split into two columns rather than the standard single column e.g.
Menu#1 Menu#5
Menu#2 Menu#6
Menu#3 Menu#7
Menu#4 Menu#8
Can this be achieved by using 2 menus and assigning some custom classes and CSS?
Appreciate any advice/input.
Thank you, as always.
Hi there,
if you have the menu setup the way you want it ( aside from the 2 columns ) then share a link to the site and ill see what we can do.
Hi David.
Sorry, it's on a local dev, testing with the latest GPT and GPP updates.
I thought there may be a way of splitting a single menu (similar to Split themes header menu) to display on two columns on the mobile menu only (break-point set to 2000+px).
The other option would be to use two menus, and somehow get them to display as two columns on the dropdown menu.
This just makes it look better than showing 8 items in a single column.
Hope that helps.
Thanks.
Try this CSS:
@media(min-width: 500px ) {
.main-navigation.toggled .main-nav>ul {
column-count: 2;
}
}I set a min-width for it to kick in, adjust that to suit.
Wow, worked perfectly!
I bow to your superior knowledge and CSS wizardry, sir :)
Thank you.
Awesome - glad to hear that worked!!!
