将响应式菜单拆分为两列

Question

这是我正在开发的网站 http://www.jokerleb.com/ and I'm using this https://responsive.menu，免费版。它会出现在 400 像素及更小的设备上。

如何像这样将它的列分成两列？

不知道如何编辑 CSS 使其看起来正确，如果可能的话。

Answer 1

你会想要使用 media queries，所以像这样的东西应该为你做：

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

请注意，您可能需要稍微尝试一下 CSS，因为宽度会因 padding、margin 和 display 类型而异。如果您提供 CSS 的样本（或者更好的是 fiddle），我可以更准确地帮助您。

单击类别按钮后，上面几行看起来像这样：

如果您更喜欢整个宽度，请将此也包含在您的 @media 选项中：

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

Answer 2

将这些行添加到您的代码中：

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

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

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

对我有用。

将响应式菜单拆分为两列

Split responsive menu into two coloumns

css

php

wordpress

menu

responsive