Während das Divi-Theme das Headermenu standardmässig am Seitenkopf fixiert, lässt Divi das Menu in der Mobilansicht verschwinden. Die Überlegung dahinter gründet im Platzbedarf: Auf den kleinen Anzeigen der Mobiltelefone und Tablets kann das Menü zuviel Platz beanspruchen. In besonderen Situationen möchte man aber das Menü immer sichtbar anzeigen. Freilich lässt sich auch dies ganz einfach bewerkstelligen.
Die Menüfixierung auf Mobilgeräten lässt sich mit ein klein wenig CSS-Code festlegen. Dieser kommt ins CSS-Stylesheet Ihrer Website, welches Sie unter Design/Customizer/Zusätzliches CSS bearbeiten können:
@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
position: fixed;
}
}In vielen Fällen wird das bereits gut funktionieren. Wenn Sie jedoch viele Seiten (oder Unterseiten) in Ihrem Menü aufführen, dann kann es unübersichtlich werden, zumal Menüpunkte unter den Rand der Anzeige rutschen.
Um diesen Effekt zu verhindern, folgt ein zusätzliches CSS-Snippet, welches dieses Problem behebt. Der Menübereich wird damit scrollbar und der Zugriff auf alle Menüpunkte möglich.
Auch dieser Code kommt ins CSS-Stylesheet – am besten gleich im Anschluss an den ersten Code unter Design/Customizer/Zusätzliches CSS:
.et_mobile_menu {
overflow: scroll !important;
max-height: 83vh;
}Das wars schon. Ziemlich einfach. Oder?
Werbung
Werbung
