応答メニューを2つの列に分割

Question

これは私がhttp://www.jokerleb.com/で作業しているウェブサイトで、私はこのhttps://responsive.menu、無料版を使用しています。 400px以下のデバイスに表示されます。

どのように2のようにその列を分割するには？

それが最初の場所で可能なら、それは右に見えるようにCSSを編集する方法がわかりません。

Answer 1

あなたのコードにこれらの行を追加します：

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

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

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

それは私のために動作します。

Answer 2

あなたはmedia queriesを使用したいと思うので、このような何かがあなたのためにそれを行う必要があります：幅がpaddingに基づいて変動しますので、あなたは、このCSS少しで遊んでする必要があるかもしれません

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

注意、marginおよびdisplayタイプ。あなたがCSSのサンプルを提供している場合（またはより良い場合はfiddle）、私はあなたをより正確に助けることができます。

あなたはものが全体の幅を行く好む場合は、同様にあなたの@mediaオプションでこれを含める：上記

ラインは、カテゴリボタンをクリックしたら、それはこのように見えるように

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