Wider off canvas 菜单太宽，无法在移动设备上关闭

Question

当在 settings.scss 中将变量 $off-canvas-width 更改为更大的比例时，关闭 canvas 菜单成功变宽。但是现在关闭 canvas 菜单对于移动设备来说太宽了，所以汉堡包图标不再可用。因此无法再次折叠关闭菜单。

有没有办法在移动菜单中添加一个仅在移动设备上可见的手动关闭按钮？

-或-

有没有办法改变每个媒体查询的边栏宽度？

Answer 1

你的两个解决方案都应该能够通过媒体查询修复..

按钮选项

HTML

<div class="nav">
<!-- Some stuff -->
<button>Close</button>
</div>

CSS

@media screen only and (max-width:567px){
button{
display:block;
}

}

@media screen only and (min-width:568px){
button{
display:none;
}
}

边栏宽度选项

CSS

@media screen only and (max-width:567px){
.nav{
width:100%;
}

}

@media screen only and (min-width:568px){
.nav{
max-width:300px; /*Or whatever yours is...*/
width:100%;
}
}

Wider off canvas 菜单太宽，无法在移动设备上关闭

Wider off canvas menu too wide to close on mobile

zurb-foundation