jQuery Hamburger Menü erscheint nicht

Question

Ich habe ein Problem mit dem Styling eines Hamburger-Menüs und die Hamburger-Menü über jQuery angezeigt werden.

Hier ist die jQuery Ich habe bisher:

$(document).ready(function(){ 

    $('.hamburger-box').on('click', function(){ 
     $('.navigation').toggleClass('burger-nav'); 
    }); 

}); 

Es ist ein Anfang, aber ich bin nicht ganz sicher, wie danach fortzufahren. Ich konnte nichts mehr zeigen, nachdem ich die Klasse sichtbar gemacht hatte. Ziemlich sicher stelle ich die Klasse an die falsche Stelle und ich habe den Abstand nicht angemessen berücksichtigt.

Ich habe einen JSFiddle hier mit dem Code im Umgang mit: (Zoom in Ihren Browser, bis Sie das Hamburgere Menü sehen)

https://jsfiddle.net/5vvtek5f/

Hier ist das Hamburger-Menü, das ich haben würde erscheinen wenn ein click auf dem hamburger icon gemacht wird: https://jsfiddle.net/xnpa2n6w/

Jede Hilfe wird sehr begrüßt!

Answer 1

https://jsfiddle.net/5vvtek5f/1/

Sie hatte eine Anzeige: keine auf Ihrer ul aber Sie eine Klasse auf der Navigations angewendet.

@media (max-width: 414px){ 
    .navigation > ul{ 
     display: none; 
    } 
} 

Also, was ich tat, war hinzufügen:

nav.navigation { 
    display: inline-block; 
} 
nav.navigation.burger-nav { 
    display: inline-block; 
} 

@media (max-width: 414px){ 
    nav.navigation { 
     display: none; 
    } 
} 

, die die Navigation versteckt, während die Bildschirmgröße unter 414px ist. Und aktiviert/deaktiviert es, wenn der Hamburger-Button angeklickt wird.