Split responsive menu into two coloumns
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.
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%;}