jquery mmenu- Kann navbar im Handy nicht anzeigen

Ich benutze mmenu, aber ich kann es nicht richtig auf Handys funktioniert. Obwohl es in einem Landscape-Modus gut angezeigt wird, wird der Teil der unteren Navigationsleiste nicht dargestellt, wenn ich einen weißen Streifen scroll, erscheint. Wenn ich jedoch auf das weiße Rechteck an Stellen klicke, an denen sich Icons befinden, reagiert es auf das Menü korrekt, als wären sie gesehen worden. Die obere Navigationsleiste wird korrekt angezeigt. Wenn ich beide Navbars auf die oberste Position setze, werden beide ebenfalls korrekt angezeigt. Aber ich habe gerne einen ganz unten.jquery mmenu- Kann navbar im Handy nicht anzeigen

.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:[email protected]" 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 

      });

Wenn ich die zweite navbar auf die Oberseite setze, kann ich es sehen, nicht im Boden.

der Link auf die Website bicimapuy.herokuapp.com.

Vielen Dank im Voraus

Quelle

2016-04-22 rossig7

ich nicht ganz könnte das gleiche Ergebnis, aber hier sind ein paar Fixes

.logo10 Änderung links zu helfen: -80px statt 80px

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

Diese Updates sollten es für die mobile 320px Breitenansicht beheben.

Prost

Quelle

2016-04-22 04:02:29

Ich habe diese Änderungen in die Media-Abfrage, aber es funktioniert noch nicht richtig. Es gab subtile Veränderungen. Ich sah ein weißes Rechteck zwischen dem Menü und der Karte. dünner als vorher..aber bleibt immer noch. Das Logo überlappen das Hamburger-Symbol in einem beliebigen Wert. 80, 100, etc. Somethingg hat sich verbessert: Ich kann die Navbar unten sehen :) Darf ich fragen, welches Ergebnis hast du bekommen? Trotzdem vielen Dank für Ihre Hilfe! – rossig7

Die Logoüberlappung wurde mit gelöst. Transform: translateX (50%) Ich kämpfe immer noch mit dem Rest. Nach diesen Änderungen ist der Desktop-Folienmenüübergang nicht mehr weich. – rossig7

Es durch Ändern der Größe MMENU scheint behoben das Problem. Ich möchte jedoch verstehen, wie es funktioniert. Wie erhält man den richtigen Mindestwert, abhängig von der Beziehung zwischen Breite und Höhe? Danke!

Quelle

2016-04-22 19:15:26 rossig7

jquery mmenu- Kann navbar im Handy nicht anzeigen

Antwort

Verwandte Themen