我正在使用mmenu,但我无法让它在手机上正常工作。尽管它在横向模式下显示得很好,但如果我扫除白色条带,它不会呈现底部导航栏的部分。但是,如果我在有图标的地方单击白色矩形,它会正确响应菜单,就好像看到它们一样。顶部导航栏显示正确。如果我将两个导航栏放在顶部位置,它们也会正确显示。但我喜欢在底部有一个。
.mm-menu {
width: 77% !important;
background: #0A7A26 !important;
}
html.mm-opening .mm-slideout {
-webkit-transform: translate(82%, 0) ;
-moz-transform: translate(82%, 0) ;
-ms-transform: translate(82%, 0) ;
-o-transform: translate(82%, 0) ;
transform: translate(82%, 0) }
@media all and (max-width: 175px) {
html.mm-opening .mm-slideout {
-webkit-transform: translate(120x, 0) ;
-moz-transform: translate(120px, 0) ;
-ms-transform: translate(120px, 0) ;
-o-transform: translate(120px, 0) ;
transform: translate(120px, 0) }
}
@media all and (min-width: 550px) {
html.mm-opening .mm-slideout {
-webkit-transform: translate(500px, 0);
-moz-transform: translate(500px, 0) ;
-ms-transform: translate(500px, 0) ;
-o-transform: translate(500px, 0) ;
transform: translate(500px, 0)}
}
.header{ /* antes tb iba en #page */
background: #056E20 !important;
position: relative;
//z-index: 15;
}
menu = $('nav#menu').mmenu(
{
navbars : [{
position: "top",
height : 1,
content : [
'<a class="fa fa-info-circle fa-2x"></a>'
]
},
{
position: "bottom"
content: [
'<a href="mailto:bicimapuy@gmail.com" class="fa fa-envelope"></a>',
'<a class="fa fa-twitter"></a>',
'<a href="https://www.facebook.com/" target="_blank"class="fa fa-facebook"></a>'
]
}
],
extensions: ["multiline"],
onClick: {
close: false
},
navbar:{
title: "Inicio"
},
/* offCanvas: {
zposition : "next"
}, */
clone: true
});
如果我把第二个导航栏放在顶部,我可以看到它,而不是在底部。
指向网站的链接 bicimapuy.herokuapp.com。
提前致谢
我无法得到相同的结果,但这里有一些修复程序可以提供帮助
.logo10 向左更改:更改为 80px 而不是 -80px
.mm 菜单更改最小宽度:至 256 像素
这些更新应该会针对移动 320px 宽度视图修复它。
干杯
似乎通过更改 mmenu 大小解决了问题。但是,我想了解它的工作方式。如何根据与宽度/高度的关系获得正确的最小值?谢谢!