[Resolved] Mobile Menu in two columns

[Baz]

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.

[David]

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.

[Baz]

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.

[David]

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.

[Baz]

Wow, worked perfectly!

I bow to your superior knowledge and CSS wizardry, sir 🙂

Thank you.

[David]

Awesome – glad to hear that worked!!!

[Author]

Posts