Website mit in der Breite flexibelem Menu
Oft kämpft man damit, dass es zu viele Menupunkte gibt und man ein sehr breites Logo hat, wodurch beim Zusammenschieben das Menu in mehrere Zeilen springt.
Das lässt sich mit ein wenig css-code vermeiden. Zusätzlich kann man einstellen ab welcher Breite das Desktop-Menu angezeigt werden soll.
Dies ist so ein Beispiel. Ab einer gewissen Breite würden die Menupunkte in zwei Zeilen umspringen. Schiebe die Seite mal zusammen und vergleiche die beiden Menus.
Mit etwas css-code ist das Problem behoben. Die Größe del Logos, der Schrift usw. wird alles über etwas css mit Hilfe der Clamp-Funktion, findet man auch auf dieser Website, völlig flexibel einstellen.
In diesem Beispiel ist der Breakpoint auf 768 px eingestellt, so dass bei der kompletten Tablet-Darstellung das normale Menu erhalten bleibt.
Unbedingt beachten, dass man es nicht versäumt, der Section, in welcher sich das Menu befindet eine ID zu geben. In diesem Beispiel ist die ID cm-flex-menu.
/* Normales Menu auf Tablet */
@media all and (min-width: 768px) {
#cm-flex-menu .et_pb_menu__menu {
display: block;
}
#cm-flex-menu .et_mobile_nav_menu {
display: none;
}
}
/* Link-Groesse mit der Clamp-Function*/
#cm-flex-menu a {
font-size: clamp(12px, 0.55vw + 7.79px, 16px);
}
/* Logo-Groesse mit der Clamp-Function */
#cm-flex-menu img {
max-width: clamp(100px, 30.10vw + -131.44px, 320px);
}
/* Dropdownlink-Groesse mit der Clamp-Function */
#cm-flex-menu li li a {
font-size: clamp(10px, 1.39vw + -0.67px, 16px);
}
