Media query för hamburger-knapp

Nu behöver vi en media query som döljer navigationsmenyn och visar hamburgar-knappen på små skärmar.

CSS för media query

Vi lägger till följande media query i filen public/css/responsive-navbar.css. Som vanligt behöver vi ha lite känsla för när brytpunkten skall vara. I exemplet nedan har jag valt 600px som brytpunkt.

Media query för hamburgare i public/css/responsive-navbar.css

/* Responsive styles: when screen is smaller than 600px */
@media (max-width: 600px) {
  .menu-toggle {
    display: block;                /* Show hamburger button on small screens */
  }

  .nav-links {
    display: none;                 /* Hide links by default */
    flex-direction: column;        /* Stack links vertically */
    position: absolute;            /* Position relative to navbar */
    top: 50px;                     /* Place below header */
    right: 0;
    background-color: #444;
    width: 150px;
    padding: 10px;
  }

  .nav-links li {
    margin: 10px 0;                /* Space between stacked links */
  }
}

Den första regeln visar hamburgar-knappen när skärmen är mindre än 600px bred. Den andra regeln döljer navigationsmenyn som standard och visar den som en vertikal stapel när knappen klickas (detta kommer vi att hantera med JavaScript i nästa steg).

Vi laddar om sidan och ändrar storleken på webbläsarfönstret till mindre än 600px. Vi ser att hamburgar-knappen visas och navigationsmenyn är dold.

Så här ser det ut på en bred skärm.

Bild: Header med navbar på en bred skärm.

Så här ser det ut på en smal skärm.

Bild: Header med navbar på en smal skärm.

Nästa steg är att visa menyn när vi klickar på hamburgar-knappen. Det löser vi med lite JavaScript i nästa avsnitt.