Umbraco - Fanoe Starter Kit - Wie man das "Hamburger" Menü anstelle des Nav auf allen Bildschirmgrößen erscheinen lässt?

Question

Wie der Titel - das Standard Fanoe Starter Kit für Umbraco 7, was ist der beste/einfachste Weg, um die "Hamburger" -Menü für die Navigation, die bei der Anzeige in einer mobilen Website erscheint erscheint auf allen Versionen (dh Desktop) unabhängig von der Bildschirmgröße?

(Dieses Starter-Kit kommt bereits mit Logik für min Bildschirmgröße = 992 usw. aber ich kann nicht scheinen, um die "toggle" zu bekommen, um die Bildschirmgröße zu ignorieren, aber nie die textliche Navigation zeigen, wenn der Schalter angeklickt wird!)

die CSS, die mit dem Starter-Kit geliefert wird, enthält ähnliche Eigenschaften wie die folgende Liste:

@media (max-width: 992px) { 

body { 
    width: 100vw; 
    overflow-x: hidden; 
} 

nav { 
    -webkit-transform: translateX(100%); 
    -ms-transform: translateX(100%); 
    transform: translateX(100%); 
    opacity: 1; 
    transition: -webkit-transform 300ms ease-in-out, opacity 300ms ease-in-out; 
    transition: transform 300ms ease-in-out, opacity 300ms ease-in-out; 
    text-align: center; 
    position: absolute; 
    top: 144px; 
} 

Edited hinzufügen: ich bin mir bewusst, der Usability-Probleme des „Hamburger“; Zur Vereinfachung habe ich es vorher nicht erwähnt, aber ich plane, dieses Symbol durch etwas wie "OPTIONEN" zu ersetzen.

Answer 1

diese entfernen:

@media (min-width: 992px){ 
#toggle { 
    display: none; 
}} 

Plus dieses vove:

`-webkit-transform: translateX(100%); 
-ms-transform: translateX(100%); 
transform: translateX(100%); 
opacity: 1; 
transition: -webkit-transform 300ms ease-in-out, opacity 300ms ease-in-out; 
transition: transform 300ms ease-in-out, opacity 300ms ease-in-out; 
text-align: center; 
position: absolute; 
top: 144px;` 

Abschnitt ohne @media nav: