Hier is een voorbeeld over hoe je een vaste navigatiebalk in CSS kunt maken.
HTML:
```
```
#navbar {
background-color: #333;
position: fixed; /* Maakt de navbar aan de bovenkant vast */
top: 0;
width: 100%; /* Volledige breedte */
display: block;
transition: top 0.3s;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #4CAF50;
color: white;
}
```
In dit voorbeeld blijft het “navbar” div-element aan de bovenkant van de pagina wanneer je naar beneden scrollt, dankzij de “position: fixed” stijlregel. Bovendien maakt deze code het div-element de volledige breedte van de pagina, stelt het de kleur van het lettertype in, en definieert het gedrag bij hover en actieve staten.
Je kan de kleurenschema’s, overgangen, en andere aspecten aanpassen naar eigen voorkeur.
