{"id":5768,"date":"2024-10-08T14:55:39","date_gmt":"2024-10-08T14:55:39","guid":{"rendered":"https:\/\/outstandingthemes.com\/wie-man-eine-sticky-navbar-mit-css-erstellt\/"},"modified":"2024-11-18T22:13:43","modified_gmt":"2024-11-18T22:13:43","slug":"wie-man-eine-sticky-navbar-mit-css-erstellt","status":"publish","type":"post","link":"https:\/\/outstandingthemes.com\/de\/wie-man-eine-sticky-navbar-mit-css-erstellt\/","title":{"rendered":"Wie man eine Sticky Navbar mit CSS erstellt:"},"content":{"rendered":"\n

Die Erstellung einer Sticky-Navbar ist eine gro\u00dfartige M\u00f6glichkeit, die Navigation auf Ihrer Website zu verbessern. Aber wie erstellt man eine Sticky-Navbar mit CSS<\/a>. <\/p>\n\n

Im Folgenden finden Sie eine Schritt-f\u00fcr-Schritt-Anleitung mit Code-Schnipseln, die Sie einfach in Ihre WordPress-Website kopieren k\u00f6nnen:<\/p>\n\n

1. Einrichten der HTML-Struktur<\/h2>\n\n

Beginnen Sie damit, eine grundlegende HTML-Struktur einzurichten. Dazu geh\u00f6rt ein <header><\/code> Element f\u00fcr die Navigationsleiste und ein <section><\/code> f\u00fcr den Inhalt. <\/p>\n\n

htmlKopierkode<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Sticky Navbar<\/title>\n  <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n  <header class=\"navbar\">\n    <nav>\n      <ul>\n        <li><a href=\"#\">Home<\/a><\/li>\n        <li><a href=\"#\">About<\/a><\/li>\n        <li><a href=\"#\">Services<\/a><\/li>\n        <li><a href=\"#\">Contact<\/a><\/li>\n      <\/ul>\n    <\/nav>\n  <\/header>\n\n  <section class=\"content\">\n    <h1>Scroll Down<\/h1>\n    <p>Content goes here...<\/p>\n    <p>More content here...<\/p>\n    <p>Keep scrolling to see the sticky effect in action.<\/p>\n  <\/section>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n
\n\n
2. CSS f\u00fcr grundlegendes Styling<\/h2>\n\n
F\u00fcgen Sie das folgende CSS hinzu, um die Navigationsleiste und den Inhalt zu gestalten. Damit wird das Erscheinungsbild festgelegt, bevor die Leiste klebrig wird. <\/p>\n\n
cssKopier kode\/* styles.css *\/\n\n\/* Reset basic styling *\/\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: Arial, sans-serif;\n  line-height: 1.6;\n}\n\n.navbar {\n  background-color: #333;\n  color: white;\n  padding: 10px 0;\n  text-align: center;\n}\n\n.navbar ul {\n  list-style: none;\n  display: flex;\n  justify-content: center;\n}\n\n.navbar li {\n  margin: 0 15px;\n}\n\n.navbar a {\n  color: white;\n  text-decoration: none;\n  font-weight: bold;\n}\n\n\/* Content section styling *\/\n.content {\n  padding: 50px;\n  background-color: #f4f4f4;\n  height: 2000px; \/* For demonstration purposes *\/\n}\n<\/code><\/pre>\n\n
\n\n
3. Machen Sie die Navbar klebrig<\/h2>\n\n
Damit die Navigationsleiste beim Scrollen am oberen Rand bleibt, f\u00fcgen Sie die Eigenschaft position: sticky<\/code> hinzu.<\/p>\n\n
cssKopier kode\/* Make navbar sticky *\/\n.navbar {\n  position: sticky;\n  top: 0;\n  z-index: 1000; \/* Keeps the navbar above other content *\/\n}\n<\/code><\/pre>\n\n
\n\n
4. Wie die Sticky Position funktioniert<\/h2>\n\n