Tiefer verschachtelten Menüs werden der Gerätegröße gemäß angezeigt. Die gestapelten Submenüs bei größeren Bildschirmen sind dann recht unfreundlich zu unseren Leserinnen. Denn sie stolpern dann darüber, dass da jeweils etwas verborgen unter dem liegt, was sie obenauf sehen. Also entzerren wir die Menüstapel etwas.
Lösung:
- Trage einfach den folgenden Code in Deine
_bscore_custom.scs
Datei ein:
@include media-breakpoint-up(lg) {
ul.depth_1 {
left: 25% !important;
top: 0% !important;
}
ul.depth_2 {
left: 25% !important;
top: 0% !important;
}
ul.depth_3 {
left: 25% !important;
top: 0% !important;
}
ul.depth_4 {
left: 25% !important;
top: 0% !important;
}
}
Hintergrund:
Bis zum Bootstrap-Breakpoint LG
wird in den Menüs Platz geschaffen, um die Submenüs dort hinein einzubetten. So wird nichts verdeckt. Die Leserin sieht direkt, was gemeint ist. Anders oberhalb des Bootstrap-Breakpoints LG
: Hier werden die Submenüs aufeinander gestapelt. Das lenkt ab. Die Leserin denkt nämlich zunächst noch einmal über das Darunterliegende nach. Verschieben wir die Submenüs jedoch jeweils ein kleines Stück nach rechts, bleibt das Vorherige weiter erkennbar, ohne vom Neuen abzulenken.
Und in welchem Zusammenhang …
… steht das mit unserer Migration zu bootScore? Nun, hat eine Web-Designerin die ersten Schritte auch in Sachen SEO getan, wird sie sich bald einem richtig dicken Brett zuwenden, nämlich ihrem Menü. Dabei muss sie thematische Cluster sauber gliedern und präsentieren, ohne zu fancy zu werden. Dann kann sie die Anzeige von festen und skalierbaren Bildern aufhübschen und beschleunigen. Über einen Teil dieser Etappe spricht auch dieser Post.
Im Übrigen: Männer sind mitgemeint.