Im folgenden Beitrag wird gezeigt, wie sich für das Ambition Theme von Themehorse ein Sticky-Menu im Narrow-Layout realisieren lässt. Generell kann ich jedem an dieser Stelle nur empfehlen, mal auf der Seite www.themehorse.com vorbei zu schauen, falls er nach neuen Ideen für sein nächstes Projekt sucht. Die Themes sind kostenlos, lassen sich sehr gut anpassen und werden selbst in der kostenfreien Version supported.
Zurück zum eigentlichen Thema. Bei vielen Themes lässt sich ein Sticky Menü meist ohne weiteres realisieren indem, man das Menü bzw. den Div in dem es liegt, die CSS Eigenschaften position:fixed und top:0px zuweist. Das Ganze umrande ich meist noch mit einer Media-Querry wie dieser:
@media screen and (min-width: 800px) {
position:fixed ;
top:0px;
}
Dadurch wird sichergestellt, dass nur ab einer gewissen Bildschirmbreite das Menü oben angeheftet bleibt. Hier handelt es sich um eine Frage des Geschmacks, aber ich persönlich finde ein Sticky-Menü verbessert nur ab einer gewissen Breite die Usability einer Website. Ist diese nicht vorhanden, sollte der Platz auf dem Screen besser für das Wesentliche – nämlich den Content – verwendet werden.
Bei den Themehorse Themes – in meinem Fall ist es das Ambition Theme – reicht dieser Code allerdings nicht aus. Er würde zwar funktionieren, allerdings nicht für alle Auflösungen. Dies liegt daran, dass die Themehorse Menüs vier feste Werte haben, bei denen sich die Darstellung ändert:
- 1290px
- 1023px
- 767px
- 480px
Daher wird der Code etwas komplexer. Ich habe den Code direkt aus dem Themehorse Support-Forum entnommen und daran ein paar Optimierungen wie die Media-Querry für die Mindestbreite hinzugefügt. Hier der angepasste Code:
@media screen and (min-width: 768px) {
.narrow-layout .info-bar {
position: fixed;
width: 1230px;
z-index: 100;
}
.narrow-layout .hgroup-wrap {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
position: fixed;
top: 0px;
width: 1230px;
z-index: 100;
}
}
@media only screen and (max-width: 1290px) {
.narrow-layout .info-bar,
.narrow-layout .hgroup-wrap {
width: 964px;
}
}
@media only screen and (max-width: 1023px) {
.narrow-layout .hgroup-wrap,
.narrow-layout .info-bar {
width: 708px;
}
}
@media only screen and (max-width: 767px) {
.narrow-layout .hgroup-wrap,
.narrow-layout .info-bar {
width: 300px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.narrow-layout .hgroup-wrap,
.narrow-layout .info-bar {
width: 460px;
}
}
@media only screen and (max-width: 767px) {
.narrow-layout .hgroup-wrap {
top: 0;
}
}
Soweit ich das richtig beobachtet habe, sind die Menüs bei fast allen Themehorse Themes ähnlich aufgebaut. Daher sollte dieser Code mit minimalen Änderungen auch bei den weiteren Themes funktionieren. Falls Ihr auch bereits eure Erfahrungen damit gemacht oder den Code in einem der anderen der Themes ausprobiert habt, könnt Ihr gerne einen Kommentar hinterlassen, ob es funktioniert.