Eine feste Navigationsleiste bleibt immer sichtbar, egal wie weit der Benutzer durch die Seite scrollt. Hier ist ein grundlegendes Beispiel, wie man eine feste Navigationsleiste mit CSS erstellen kann:
HTML-Code:
```html
CSS-Code:
```css
.navbar {
background-color: #333;
position: fixed; /* Fixierte Position */
top: 0; /* Stelle die Leiste an die Spitze der Seite */
width: 100%; /* Ganze Breite */
}
/* Navigationselemente */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Ändert die Farbe der Links beim Überfahren mit der Maus */
.navbar a:hover {
background-color: #ddd;
color: black;
}
```
Wichtig bei der Verwendung von `position: fixed` ist, dass Sie genug Abstand (padding) auf dem folgenden Element lassen, weil die fixierte Leiste ansonsten Inhalte verdecken kann.