jquery mmenu- 无法在手机中显示导航栏



我正在使用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 大小解决了问题。但是,我想了解它的工作方式。如何根据与宽度/高度的关系获得正确的最小值?谢谢!

最新更新