Trick # 346 | Dieser Beitrag beinhaltet 871 Wörter. – Geschätzte Lesezeit: ca. 5 Minuten.
Im Menü-Modul des Divi-Themes wird die Breite der einzelnen Menülinks von der Länge der Linktexte bestimmt. Das passt aber nicht immer. Hier erfahren Sie, wie Sie die Menüpunkte gleichmässig verteilen und deren Breite ausgleichen können..
Das Menü-Modul des Divi-Themes zeigt sich standardmässig so:
Um die einzelnen Menüpunkte gleichmäössig auf der gesamten Seiten- oder Spaltenbreite zu verteilen gibt es zwei Vorgehensweisen – abhängig davon, ob ein Logo gezeigt wird oder eben nicht.
Menü ohne Logo ausgleichen
Befassen wir uns erst mit Menüs ohne Logo. Hierfür müssen Sie dem Menü-Modul eine CSS-Klasse vergeben. Das können Sie im Tab «Erweitert» tun. Klicken Sie auf «CSS-ID und Klassen» und fügen Sie den Text «menu-without-logo» ins Textfeld «CSS-Klassen» ein.
Nun wechseln Sie zum Tab «Design» und legen die Darstellung des Menütexts auf «Blocksatz» fest.
Nun kopieren Sie den folgenden CSS-Codeblock und fügen Sie ihn in das CSS-Stylesheet Ihrer Website – unter Design/Customizer/Zusätzliches CSS – ein:
.menu-without-logo .et_pb_menu__menu>nav>ul>li {
width: calc(100% / 4);
}
.menu-without-logo .et_pb_menu__menu>nav>ul>li>a {
width: 100%;
text-align: center;
padding: 25px 20px;
background: #ffffff;
border: 1px solid #fffff;
}
.menu-without-logo .et-menu>li {
padding-left: 0px;
padding-right: 0px;
}
.menu-without-logo .menu-item-has-children>a:first-child:after {
position: relative;
}Passen Sie vor allem die Zeile 2 im Code an: Das Beispiel ist für 4 Menüpunkte ausgelegt – dies ist der letzte Wert der Zeile. Passen Sie ihn an, wenn Sie mehr oder weniger Menüpunkte haben.
Das oben verwendete Menü-Modul zeigt sich nun so:
Soweit so gut. Wenn Sie aber ein Menü MIT Logo verwenden, benötigen Sie einen leicht angepassten Code.
Menü mit Logo ausgleichen
Vergeben Sie (im Tab «Erweitert», «CSS-ID und Klassen» unter «CSS-Klassen») die Klasse «menu-with-logo». Erneut wechseln Sie in den Tab «Design» und stellen den Menütext auf Blocksatz.
Nun kopieren Sie den folgenden CSS-Code und fügen ihn in das CSS-Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzlcihes CSS:
.menu-with-logo .et_pb_menu__menu>nav>ul>li {
width: calc(100% / 4);
}
.menu-with-logo .et_pb_menu__menu>nav>ul>li>a {
width: 100%;
text-align: center;
padding: 25px 20px;
display: inline-block;
position: absolute;
background: #ffffff;
border: 1px solid #ffffff;
top: -12px;
}
.menu-with-logo .et-menu>li {
padding-left: 0px;
padding-right: 0px;
}
.menu-with-logo .menu-item-has-children>a:first-child:after {
position: relative;
}Auch hier ist der letzte Wert der Zeile 2 massgebend für die Zahl der Menüpunkte – in unserem Fall 4. Passen Sie die Zahl nötigenfalls an.
Unser Beispiel ergibt folgendes Menü:
Ziemlich simpel. Nicht?
Werbung
Bilder-Special – Trick #5: Coole 3D-Flip-Cards ganz einfach in HTML erstellen – komplett ohne Plugin
Werbung
