Responsive Navigation - Toggle Menu

Nabend zusammen,

ich bin mal wieder am verzweifeln. Diesmal geht es um eine responsive Navigation, die nicht so richtig will.

Folgendes Problem:

Bei der Desktop-Darstellung passt soweit alles, allerdings scheitere ich an der mobilen Version. Und zwar soll es ab 550px in der Breite ein Toggle Menu sein.

Zwei Dinge funktionieren noch nicht:

1. Beide Buttons, also der fürs Einklappen und der fürs Aufklappen, sind noch untereinander sichtbar. Ich habe schon versucht diese mit position: relative für die Navbar und position: absolute mit top: 0 und left: 0 für die menu-buttons übereinander zu legen, aber dann verschwanden sie irgendwie komplett. Sie waren einfach nicht mehr da.

2. Wenn ich versuche, das Menu mit den Buttons auf und zu, zuklappen, passiert nichts. Lediglich der menu-button zum Aufklappen wird nicht mehr angezeigt, was auch richtig ist.

Es würde mich sehr freuen, wenn jemand da mal drüber gucken würde. Den Code und den aktuellen Stand findet ihr hier: http://codepen.io/jr-cologne/pen/dGYGvd/

Vielen Dank schon mal!

Gruß
JR Cologne

Danke erstmal. Ich werd's mir mal anschauen.

Edit: So, gleich mal die erste Frage. Anscheinend machst du das Ganze ja mit einer anderen Technik. Und zwar irgendwie mit einem Label-Element und einer Checkbox. So wirklich verstanden habe ich es noch nicht, muss ich gleich nochmal schauen, aber erstmal die Frage:

Hat diese Vorgehensweise irgendwelche Vorteile zu der von mir, die bisher noch nicht funktioniert?

Oder ist es einfach nur Geschmackssache, welche Variante man nimmt?

Edit 2: Habe es jetzt geschafft, dass sich das Menu ausklappt. Das einzige Problem ist noch, dass es sich nicht einklappt, wenn man auf den menu-button klickt.

Edit 3: Jetzt funktionierts einwandfrei.

Waren echt blöde Fehler...