Menüleiste statisch
Verfasst: So 7. Apr 2024, 08:08
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:
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.
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;
}<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.