Hoe te maken: Navigatiebalk met pictogrammen

Leer hoe je een responsieve navigatiebalk met pictogrammen maakt met CSS.

Maak een responsieve navigatiebalk met pictogrammen

Stap 1 - Voeg HTML toe:

Laden van een pictogrambibliotheek
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
  <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
  <a href="#"><i class="fa fa-fw fa-search"></i> Zoek</a>
  <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>
  <a href="#"><i class="fa fa-fw fa-user"></i> Login</a>
</div>

Tweede stap - Voeg CSS toe:

/* Stel de stijl van de navigatiebalk in */
.navbar {
  breedte: 100%;
  achtergrondkleur: #555;
  overschot: automatisch;
}
/* Stijl van navigatiebalkkoppeling */
.navbar a {
  float: links;
  tekstuitlijning: midden;
  uitsteek: 12px;
  kleur: wit;
  tekstdecoratie: geen;
  lettergrootte: 17px;
}
/* Stijl van navigatiebalkkoppeling bij muisover */
.navbar a:hover {
  achtergrondkleur: #000;
}
/* Huidige/actieve navigatiebalkkoppeling */
.active {
  achtergrondkleur: #04AA6D;
}
/* Voeg responsiviteit toe - toon de navigatiebalk automatisch verticaal in plaats van horizontaal op schermen kleiner dan 500 pixels */
@media scherm en (max-width: 500px) {
  .navbar a {
    float: geen;
    display: blok;
  }
}

Try it yourself

Related pages

Tutorial:CSS navigation bar

Tutorial:How to create icon navigation bar