Menüleiste statisch

CSS und andere hilfreiche Anweisungen
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 6085
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Menüleiste statisch

Ungelesener Beitrag von Tommy Herrmann »

Es wird häufig der Wunsch geäußert, eine fixierte Menüleiste zu verwenden, die sich beim Scrollen nicht verkleinert.

Hier ist ein Beispiel und mein kurzes Tutorial dazu:

https://www.mobirise-tutorials.com/Tuto ... .html#Menu

Um dies zu erreichen, deaktiviere ich einfach den Schalter "Sticky" in den Werkzeugen der Menüleiste, was im Grunde genau das Gegenteil bewirkt.

Anschließend weise ich der Menüleiste eine eigene CSS-Klasse zu, um sie wieder "Sticky" - also fixiert - zu machen. Ich habe meine CSS-Klasse hier "myfixedmenu" genannt:

Code: Alles auswählen

.myfixedmenu {
  position: fixed !important;
}
Diese Class schreibe ich in den Bereich "CSS Editor" vom "Code Editor" und füge sie dem <nav> Tag </nav> hinzu:

<nav class="navbar navbar-dropdown myfixedmenu"> … </nav>

Dadurch behält die Menüleiste immer die gleiche Höhe und das Logo wird nicht verkleinert. Achtet daher darauf, die Menüleiste nicht zu hoch zu gestalten, da diese sonst auf dem Smartphone zu viel Platz einnehmen könnte.


navbar.jpg
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 0 Gäste