Fixed Header Container DIV / Section für Header in Oxygen

Webdesign

Um einen div-Container in WordPress, speziell beim Einsatz des Oxygen Builders und Automatic CSS, oben auf der Seite zu fixieren, benötigen Sie CSS. Hier ist eine detaillierte Anleitung, die Ihnen Schritt für Schritt zeigt, wie Sie dies erreichen können:

1. Identifizieren Sie den div-Container

Zunächst müssen Sie den div-Container identifizieren, den Sie fixieren möchten. Im Oxygen Builder können Sie dies tun, indem Sie den div im Struktur-Panel auswählen. Stellen Sie sicher, dass dieser div die section und den Header-Builder, die Sie fixieren möchten, enthält.

2. Hinzufügen einer CSS-Klasse

Nachdem Sie den div ausgewählt haben, sollten Sie ihm eine eindeutige CSS-Klasse zuweisen. Dies erleichtert das gezielte Ansprechen mit CSS. Zum Beispiel:

  • Wählen Sie den div im Oxygen Builder aus.
  • Gehen Sie zum Panel auf der linken Seite unter dem Tab „Advanced“ > „CSS Classes“.
  • Geben Sie eine eindeutige Klasse ein, z.B. fixed-top-container.

3. CSS zum Fixieren hinzufügen

Jetzt, wo Ihr div eine Klasse hat, können Sie CSS verwenden, um ihn zu fixieren. Automatic CSS bietet eine großartige Möglichkeit, globales CSS zu verwalten, aber für spezifische Anweisungen wie diese, können Sie auch den Oxygen Builder nutzen:

  • Öffnen Sie im Oxygen Builder den „Manage“-Bereich, der sich oben rechts befindet.
  • Wählen Sie „Selectors“ und dann „Add Selector“.
  • Geben Sie den Namen Ihrer Klasse ein, vorangestellt von einem Punkt, z.B. .fixed-top-container.
  • Im CSS-Codebereich, der daraufhin erscheint, fügen Sie folgende Anweisungen ein:
.fixed-top-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Stellt sicher, dass der div über anderen Elementen schwebt */
}
  • Speichern Sie Ihre Änderungen.

4. Berücksichtigen Sie die Körper-Scroll-Leiste

Das Fixieren des div-Containers an der Oberseite kann dazu führen, dass der Inhalt unter ihm überlappt wird. Um dies zu verhindern, sollten Sie einen oberen Padding-Wert für den <body>-Tag oder den nachfolgenden Inhalt hinzufügen, der dem Höhe des fixierten div entspricht. Dies können Sie im Custom CSS-Bereich des Oxygen Builders tun:

body {
    padding-top: 100px; /* Passen Sie diesen Wert an die Höhe Ihres fixierten div an */
}

 

Nutzen Sie nun jede Bildschrimdefinition, um die padding-top-Werte für verschiedene Bildschirmgrößen anzupassen. Die spezifischen Punkte, an denen Ihre Regeln angewandt werden sollen, sind bei 1280px, 992px, 768px und 480px. Dazu padding-top: 120 px; in der nächsten Bildschirmauflösung eingeben und APPLY drücken. Dann in ein anderes Element wechseln, wieder zurück in das Advanced-CSS con INNER-Content und den nächsten Wert für padding-top: 140 px eingeben und wieder für die nächste Bildschrimauflösung wiederholen…

 

 

Zusammenfassung

Sie haben jetzt einen div-Container in Ihrer WordPress-Seite, der den Oxygen Builder und Automatic CSS verwendet, oben auf der Seite fixiert. Stellen Sie sicher, dass Sie die Website nach diesen Änderungen testen, um sicherzustellen, dass alles wie erwartet funktioniert und dass der fixierte div keine anderen wichtigen Inhalte überdeckt oder das Layout auf unerwartete Weise beeinflusst.