Navbar stylad

Vi stylar den ul/li som navbaren består av, så det ser mer ut som en navbar.

I grunden är ul/li en bra konstruktion för en navbar, men vi behöver tillföra style så att det ser mer ut som en navbar.

Vi lägger till följande CSS i filen public/css/responsive-navbar.css.

/* Navigation links displayed in a row */
.nav-links {
  list-style: none;                /* Remove bullets */
  display: flex;                   /* Display links in a row */
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-left: 20px;               /* Space between links */
}

.nav-links a {
  text-decoration: none;           /* Remove underline */
  color: white;                    /* White text for links */
}

Vi tar bort grundstilen för ul/li och visar länkarna i en rad med hjälp av flexbox. Vi lägger även till lite mellanrum mellan länkarna och tar bort understrykningen.

Vi laddar om sidan och får följande utseende.

Bild: Nu är navbaren stylad med flexbox.

Navbar stylad

CSS för ul/li till navbar