jquery mmenu- Can't display navbar in cellphone

Question

I am using mmenu, but I can't get it working properly on cellphones. Although it's displayed well in a landscape mode it doesn't render the part of the bottom navbar, if I scoll a white band appears. However if I click on the white rectangle on places where there are icons, it, it respond to the menu correctly as if they were seen. The top navbar is seen correctly. If I put both navbars on top position they are both seen correctly as well. But I like to have one at the bottom.

.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

            });     

If I put the second navbar on top I can see it, not in bottom.

the link to the site bicimapuy.herokuapp.com.

Thanks in advance

Answer 1

It seems by changing the mmenu size resolved the problem. However, I want to understand the way it works. How to get the correct min value according its the relationship with width/height? Thanks!

Answer 2

I couldn't quite get the same result but here are a few fixes to help

.logo10 change left: to 80px instead of -80px

.mm-menu change min-width: to 256px

Those updates should fix it for the mobile 320px width view.

Cheers