Clever Geek Handbook

Split responsive menu into two columns

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

How do I split columns into 2 like this?

enter image description here

Not sure how to edit the CSS to make it look correct if possible in the first place.

+3


source to share


2 answers


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%;
    }
}


This works for me.

+5


source


You 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, as the width will vary depending on the types padding

, margin

and display

. If you can provide a sample of your CSS (or better yet a fiddle ) I can help you more accurately.



The above lines do it like this as soon as the category button is clicked: enter image description here

If you prefer the item to run the full width, include it in your variation @media

:

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


source






More articles:


All Articles