Split responsive menu into two coloumns

Question

This is the website I'm working on http://www.jokerleb.com/ and I'm using this https://responsive.menu, the free version. it will appear on devices 400px and smaller.

How to split its columns into 2 like so?

Don't know how to edit the CSS to make it look right, if it's possible in the first place.

Answer 1

Adds these lines to your code :

@media screen and (max-width: 400px){
    #responsive-menu-container{
        width:100%;
    }

    #responsive-menu {
        display: flex;
        flex-wrap: wrap;
    }

    #responsive-menu li{
        width:50%;
    }
}

It works for me.

Answer 2

You'll want to use media queries, so something like this should do it for you:

<style>
@media screen and (max-width: 400px) {
     #responsive-menu-container li.responsive-menu-item {
         width: 50%;
         display: inline-block;
     }
}
</style>

Note that you may need to play around with this CSS a little, since widths will vary based upon padding, margin and the display type. If you provide a sample of your CSS (or better yet a fiddle) I can help you more exactly.

The lines above make it look like this once the category button is clicked:

If you'd prefer the thing go the whole width, include this in your @media option as well:

#responsive-menu-container {
    width:100%;
}