Wie man das Navigationsmenü am oberen Bereich der Webseite fixiert

fixierte Navigation in Wordpress mit dem Theme OptimizePress

Damit die eigene Webseite professioneller wahrgenommen wird, kann man die Naigation oben auf der Webseite fixieren. So bleibt diese immer sichtbar egal wohin der Benutzer scrollt. Auf meiner Webseite über Tokajer Wein (klick) haben wir so eine fixierte Navigation.

Es gibt verschiedene Gründe um sich für eine solche Navigation zu entscheiden. Zum einen sieht es teilweise einfach schöner aus, zum anderen kann man damit aber auch bezwecken den Benutzer auf weitere Seiten der eigenen Webseite zu schicken. Dies ist zum Beispiel sinnvoll wenn man den Benutzer von einer Informationsseite (z.B. Blogartikel, etc.) zum eigenen Onlineshop leiten will.

Bei unserer Webseite über Tokajer Wein ist dies der Fall. Die Webseite TokajiAszu.net dient als Informationsseite über Tokajer Wein. Auf der Seite TokajiAszu.de verkaufen wir den Wein. Wir möchten natürlich, dass der Benutzer auf den Onlineshop aufmerksam wird. Das erreichen wir mit einer Navigation die immer mitzieht wenn der Benutzer scrollt. So kann der User immer zu unserem Shop gelangen egal wo er sich gerade auf der Seite befindet.

Gut aber jetzt genug geredet. Wie habe ich es hinbekommen, dass die Navigation immer oben bleibt?

Ganz einfach:

Ich habe den CSS Code verändert. Für unsere Webseite nutzten wir WordPress in Kombination mit dem Theme von OptimizePress (klick). Hier kann ich im LiveEditor unter Page Settings => Other Scripts => Custom CSS einen individuellen CSS-Code einfügen. Wenn auf allen Seiten die Navigation so angezeigt werden soll, dann speichert man den CSS-Code einfach unter OptimizePress => Dashboard => Custom CSS im Adminbereich von WordPress.

Der CSS-Code mit dem die Navigation fixiert wird:

.banner {padding: 0px 0px;}
.banner {
position: fixed;
width: 100%;
top: 0;
left: 0;
border-top: 0px solid #ffffff;
border-bottom: 0px solid #ffffff;
background: #fff;
vertical-align: top;
-webkit-box-shadow: 0px 4px 22px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 4px 22px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 4px 22px 0px rgba(50, 50, 50, 0.75);
z-index: 999999;}
.dk-select {float: right !important;}
.container .eight.columns {width: 18%;}
.container .sixteen.columns {float: right; width: 75%;}
.banner .op-logo img {max-width: 100%;}

Diesen einfach nur kopieren und wie oben beschrieben als neuen CSS-Code in die Webseite einfügen. Schon wird Deine Navigation immer oben angezeigt…

Tipp: Teste unbedingt wie Deine Webseite mit einem Handy angezeigt wird wenn Du den CSS-Code veränderst. Wenn die komplette Seite durch die Navigation verdeckt wird, führt das zu keiner guten Nutzererfahrung. Deine Webseite kannst Du mit dem Test auf Optimierung für Mobilgeräte (klick) von Google anzeigen lassen.

About The Author

Sergio

149.600.000 km von der Sonne entfernt erblicke eine neue Menschenseele Mutter Erde. Seine Eltern nannten diese Sergio. Seitdem tobt er durch die Schöpfung, schreckt vor nichts zurück wenn es um die Errichtung einer neuen, uns allen dienenden Welt geht und erfreut sich an den unendlichen Möglichkeiten des Kosmos.

4 Comments

  • Marko

    Reply Reply 23. Mai 2015

    Danke danke danke Sergio!! Genau das habe ich schon stundenlang im Internet gesucht! Es sieht wirklich klasse aus. Vielen Dank auch für den Tipp, dass man die Webseite testen soll wie es mit dem Handy aussieht. LG aus Bremen, Marko

    • Klaus

      Reply Reply 25. Mai 2015

      kann mir dem nur anscließen.. danke!

  • Andrea

    Reply Reply 24. Mai 2015

    perfekt! danke für diesen Tipp.. vielleicht richtet OP ja in Zukunft auch so eine funktion ein.. wäre auf jeden fall hilfreich alleine schon wegen der von dir angesprochenen mobilen version der website

  • Jürgen

    Reply Reply 27. Mai 2015

    wuhuu das ist eine richtig gute alternative zu der normalen navigation in wordpress

Leave A Response

* Denotes Required Field