更宽的画布菜单太宽，无法在手机上关闭

Question

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

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

-OR -

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

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