Im Divi-Theme wechselt die Navigation standardmässig bei 980px Bildschirmbreite auf das Hamburger-Menu. Das ist meist sinnvoll – aber nicht in jedem Fall. Sie können den so genannten «Breakpoint» darum ganz einfach selbst festlegen. Sie übersteuern damit den Divi-Standardwert und bestimmen, wann der Wechsel in der Navigation geschehen soll.
Was Sie für den Trick benötigen, sind ein paar Zeilen CSS-Code. Fügen Sie ihn in das CSS-Stylesheet Ihrer Divi-Website ein. Am besten unter Design/Customizer/zusätzliches CSS:
@media only screen and (max-width: 1280px) {
#et_mobile_nav_menu {
display: block;
}
#top-menu-nav, #top-menu, #et_top_search {
display: none;
}
}Den Wert der Anzeigenbreite, bei welcher der Wechsel passieren soll, geben Sie in Zeile 1 ein. Im Beispiel oben sind 1280px als Breakpoint angegeben. Bedenken Sie, dass Divi bei 980px ohnehin auf den Hamburger wechselt. Also müsste Ihr Wert grösser als 980px sein.
Es geht auch andersrum
Wenn Sie das Divi-Theme dazu bringen möchten, die Standard-Navigation auch bei Anzeigengrössen kleiner als 980px anzuzeigen, benötigen Sie statt des obigen folgenden CSS-Code. Auch der gehört ins CSS-Stylesheet (unter Design/Customizer/zusätzliches CSS):
@media only screen and (max-width:980px) and (min-width:480px) {
#top-menu, .fullwidth-menu, nav#top-menu-nav, nav.fullwidth-menu-nav {
display:block!important;
}
#et_mobile_nav_menu, .et_mobile_nav_menu {
display: none!important;
}
}Wie erwähnt wechselt das Divi-Theme bei 980px Anzeigebreite ohnehin von der Hamburger- auf die Standard-Navigation. Darum können Sie den ersten Wert in Zeile 1 getrost auf 980px belassen. Den zweiten Wert (hier 480px) können Sie nach eigenem Bedürfnis angeben. Einzige Bedingung: Er muss kleiner sein als 980px. Der Wert, den Sie wählen wird der neue Breakpoint: Bei breiteren Anzeigen wird die Standard-Navi angezeigt, bei kleineren das Hamburger-Menü.
Ziemlich simpel. Nicht?
Werbung
Werbung
