Hauptmenüzeile wechselt viel zu früh in die Responsive Gestaltung

Guten Abend HOK

Verwende bei horizontalen Menüs kurze Bezeichnungen für die jeweiligen (Haupt-)Seiten, wie z.B: "Start, Info, Wir, Aktuell" etc.

Benutze nur wenige Hauptseiten und lege gegebenenfalls dazu passende Unterseiten an.

Eine gute Nacht und beste Grüsse

elch

Noch ein Tipp dazu:

Hauptmenüpunkte mit (längeren) Untermenüs möglichst weit vorn (links) im Hauptmenü eintragen, sonst kann (wenn ich mich richtig erinnere) das möglicherweise rechts überhängende Untermenü (vorausschauend) vorzeitig umschalten.

Vor längerer Zeit habe ich für Flat-Responsive ersucht das Menü so zu programmieren, dass ein Untermenü das rechts nicht mehr ausreichend Platz hat dann nach links aufklappt.
Das wurde aber als zu aufwändig erklärt und nicht verwirklicht.

Zitat von HOK

Kann man das irgendwie einstellen, wann der "Breakpoint ist" ?

Feste Breakpoints haben die älteren Layouts. Die neueren wie auch Flat-Responsive schalten automatisch auf Mobile-Menü sobald der Platz nicht mehr ausreicht.

Zitat von HOK

Ja, das ist ja genau mein Problem - trotz "Kürze" leider sehr schnell z. b. 15" Laptop im Responsive Menü trotz Platz .....

Müsste man am besten Online sehen woran das liegt. Ich denke mal das die Unterseiten zu lange Namen haben.

Wenn das so halbwegs passt könnte man eventuell die Abstände im Hauptmenü mit etwas CSS verringern.

Habe ich HIER so umgesetzt, mal das Fenster in der Breite verkleinern und das Hauptmenü beobachten.

Kannst du an mario(at)zella.de senden.

Das (at) durch @ ersetzen.

Zitat von HOK

Ein tick kleiner und die Ansicht schaltet um - das ist leider echt nicht so schön !

Wenn es nur ein kleiner Tick ist hilft vielleicht das von mir dafür verwendete CSS:

<style>
/*Menü Zeichenabstand und Innenabstand*/
#header #nav > ul li a { letter-spacing: .1em; padding: 0 .5em;}
</style>

Und sonst wünsche ich euch Spezialisten viel Erfolg.

LG
von laienhaftem Mitleser

Link ist angekommen, wie vermutet ist das Problem bei vielen Unterseiten mit langen Namen.

Bei 1507px Bildschirmbreite wird auf Mobile geschaltet weil der Platz nicht mehr ausreicht.

Hier ein paar Lösungsvorschläge, diese kannst du natürlich auch kombinieren:

• Hauptseite "Der Shop" weiter vorn platzieren.
• Hauptseite "Der Shop" weniger Unterseiten mit kürzeren Namen, oder diese im Hauptmenü ausblenden und auf den Übergeordneten Seiten verlinken.
• Layout-Einstellungen Menü auf scrollend, dann nimmt das Logo beim scrollen nicht den Platz weg.
• Mit etwas CSS die Abstände ab der problematischen Bildschirmbreite verringern.

Zu letztem Punkt hier mein verwendetes CSS für meine Seite https://www.zella.de/v19-2/. Dieses kannst du anpassen und für deine Seite verwenden.

<style>
#header #nav>ul li a {
letter-spacing: .05em !important;
}
@media (max-width: 1588px) {
#header #nav>ul li a {
letter-spacing: .05em !important;
padding: 0 .8em !important;
font-size: 1.0em !important;
}
#header #nav li.haschilds>a, #header #nav .dropdown-menu li.haschilds {
padding-right: .8em !important;
}
#header #nav li.haschilds>a:after, #header #nav .dropdown-menu li.haschilds>a:after {
display: none !important;
}}


@media (max-width: 1109px) {
#header #nav li.haschilds > a, #header #nav .dropdown-menu li.haschilds {
padding-right: 3em !important;
}
#header #nav li.haschilds>a:after, #header #nav .dropdown-menu li.haschilds>a:after {
display: block !important;
}}
</style>