Die Erstellung einer Sticky-Navbar ist eine großartige Möglichkeit, die Navigation auf Ihrer Website zu verbessern. Aber wie erstellt man eine Sticky-Navbar mit CSS.
Im Folgenden finden Sie eine Schritt-für-Schritt-Anleitung mit Code-Schnipseln, die Sie einfach in Ihre WordPress-Website kopieren können:
1. Einrichten der HTML-Struktur
Beginnen Sie damit, eine grundlegende HTML-Struktur einzurichten. Dazu gehört ein <header> Element für die Navigationsleiste und ein <section> für den Inhalt.
htmlKopierkode<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky Navbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="navbar">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section class="content">
<h1>Scroll Down</h1>
<p>Content goes here...</p>
<p>More content here...</p>
<p>Keep scrolling to see the sticky effect in action.</p>
</section>
</body>
</html>
2. CSS für grundlegendes Styling
Fügen Sie das folgende CSS hinzu, um die Navigationsleiste und den Inhalt zu gestalten. Damit wird das Erscheinungsbild festgelegt, bevor die Leiste klebrig wird.
cssKopier kode/* styles.css */
/* Reset basic styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.navbar {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
}
.navbar li {
margin: 0 15px;
}
.navbar a {
color: white;
text-decoration: none;
font-weight: bold;
}
/* Content section styling */
.content {
padding: 50px;
background-color: #f4f4f4;
height: 2000px; /* For demonstration purposes */
}
3. Machen Sie die Navbar klebrig
Damit die Navigationsleiste beim Scrollen am oberen Rand bleibt, fügen Sie die Eigenschaft position: sticky hinzu.
cssKopier kode/* Make navbar sticky */
.navbar {
position: sticky;
top: 0;
z-index: 1000; /* Keeps the navbar above other content */
}
4. Wie die Sticky Position funktioniert
position: sticky: Mit dieser CSS-Eigenschaft bleibt das Element in seiner relativen Position, bis eine bestimmte Bildlaufposition erreicht ist. Danach bleibt es an einer bestimmten Position (wietop: 0).top: 0: Legt fest, wie weit die Navigationsleiste vom oberen Rand entfernt sein soll.z-index: 1000: Sorgt dafür, dass die Navigationsleiste über anderen Elementen bleibt.
5. Zusätzliche Erweiterungen (optional)
Für eine bessere Ästhetik können Sie einen Schatteneffekt und einen Übergang der Hintergrundfarbe hinzufügen.
cssKopier kode/* Optional enhancements */
.navbar {
box-shadow: 0 4px 2px -2px gray;
transition: background-color 0.3s ease;
}
.navbar.sticky {
background-color: #222;
}
6. Endgültiger HTML- & CSS-Code
Nachfolgend finden Sie den vollständigen Code für Ihre Sticky Navbar.
HTML
htmlKopierkode<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky Navbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="navbar">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section class="content">
<h1>Scroll Down</h1>
<p>Content goes here...</p>
<p>More content here...</p>
<p>Keep scrolling to see the sticky effect in action.</p>
</section>
</body>
</html>
CSS
cssKopier kode/* styles.css */
/* Reset basic styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.navbar {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 4px 2px -2px gray;
transition: background-color 0.3s ease;
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
}
.navbar li {
margin: 0 15px;
}
.navbar a {
color: white;
text-decoration: none;
font-weight: bold;
}
.navbar.sticky {
background-color: #222;
}
/* Content section styling */
.content {
padding: 50px;
background-color: #f4f4f4;
height: 2000px;
}
7. Implementierung in WordPress
So fügen Sie diesen Code zu Ihrer WordPress-Website hinzu:
- HTML-Code:
- Verwenden Sie den Custom HTML-Block im WordPress-Editor.
- Fügen Sie den HTML-Code innerhalb dieses Blocks an der Stelle ein, an der die Navigationsleiste und der Inhalt erscheinen sollen.
- CSS-Code:
- Gehen Sie zu Ihrem WordPress-Dashboard.
- Navigieren Sie zu Erscheinungsbild > Anpassen > Zusätzliche CSS.
- Fügen Sie den CSS-Code dort ein.
8. Sie sind bereit!
Jetzt haben Sie eine funktionale Navigationsleiste auf Ihrer Website. Sie können die Stile nach Belieben an das Design Ihrer Website anpassen.
