[Resolved] Mobile Menu in two columns

Home Forums Support [Resolved] Mobile Menu in two columns

Home Forums Support Mobile Menu in two columns

  • This topic has 5 replies, 2 voices, and was last updated 3 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1978129
    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.

    #1978251
    David
    Staff
    Customer Support

    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.

    #1978718
    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.

    #1978765
    David
    Staff
    Customer Support

    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.

    #1978777
    Baz

    Wow, worked perfectly!

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

    Thank you.

    #1978817
    David
    Staff
    Customer Support

    Awesome – glad to hear that worked!!!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.