WordPress-Internetseite in Offenbach erstellen

Dorayaki WordPress-Theme vom Elmastudio um eine feststehende Menüleiste erweitern

Gerade auf längeren WordPress-Seiten mit viel scrollbarem Inhalt finde ich persönlich eine fixierte Menüleiste immer sehr praktisch. So kann der Seitenbesucher jederzeit eine andere Auswahl treffen, ohne erst wieder bis an den Anfang der Seite scrollen zu müssen. Jetzt kann man zwar die Menüleiste mit einem „Position: fixed“ sehr leicht an die obere Position des Browsers kleben, aber in der Regel hat man im Dorayaki-Theme auch eine Header-Überschrift, ein Grafiklogo oder sogar die Header-Info-Textboxen eingebaut. Wenn ich jetzt einfach diesen ganzen Block fixiere, nimmt das unter Umständen relativ viel Platz vom Browserfenster weg. Besser finde ich, wenn der Header aus dem Bild scrollt und nur das Menü ab einer bestimmten Position stehen bleibt.

Schritt 1. Wo finde ich den passenden JavaScript-Code?

Um das hinzubekommen, benötigt man etwas JavaScript und eine zusätzliche Zeile CSS in seinem WordPress-Theme. Jetzt ist natürlich nicht jeder ein Spezialist in Sachen JavaScript und kann sich das mal schnell selber programmieren. Aber das muss auch nicht sein. Im Internet findet man dazu einige Seiten, die einem den benötigten JS-Code zur Verfügung stellen. Ich bin zum Beispiel hier fündig geworden. Natürlich müssen wir die Angaben ein wenig anpassen, damit sie auch mit unserem Theme von Elmastudio zusammen funktionieren.

Schritt 2. JavaScript-Code entsprechend anpassen

Also fangen wir mit dem Anpassen von dem JavaScript-Code an. Damit das funktioniert, müssen wir die Bezeichnung der Navigation in den JavaScript anpassen. Also ändern wir das „.nav-container“ in die Bezeichnung um, die der aktuelle Menü-Container in unserem WordPress-Theme hat. Menü vom Dorayaki Theme nachdem scrollen fixierenDiese Bezeichnung setzt sich normalerweise so zusammen, dass zuerst das Wort menu kommt, dann kommt die Bezeichnung, die man selber dem Menü im Backend von WordPress gegeben hat – in meinem Fall einfach menue, gefolgt von dem Wort container und das alles mit einem Bindestrich voneinander getrennt. Dabei kommt dann bei mir „.menu-menue-container“ heraus und das ersetzt in dem JS-Code die Bezeichnung „.nav-container“. Man kann auch mit den Werkzeugen der Browser zum Untersuchen von Internetseiten einfach den Menü-Container anwählen und sieht dann genau die aktuelle Bezeichnung, wie sie auf dem folgenden Bild zu sehen ist.

Und der für mich angepasste JS-Code lautet:
Menü vom Dorayaki Theme nachdem scrollen fixierenIhr werdet es bestimmt schon erkannt haben, das scrollTop()> 136 sorgt für das Auslösen der Funktion, sobald die Seite sich um 136 Pixel nach oben bewegt hat. Diesen Wert muss man natürlich an seine eigene Situation anpassen, je nachdem wie groß der Header ist und ab wann man die Menüleiste fixieren möchte. Wenn man sich einen Screenshot seines aktuellen Seiten-Headers macht und ein Grafikprogramm wie Paint nutzt, kann man die genaue Pixel-Position recht einfach herausfinden.

Schritt 3. JavaScript-Code in das WordPress-Theme einbinden

Jetzt müssen wir noch dem Theme diese JavaScript-Funktion auch zur Verfügung stellen. Das geht am einfachsten, wenn man sich in die custom.js – findet man im Ordner JS im Dorayaki-Theme-Ordner – mit einträgt. Ja man kann natürlich auch eine eigene JS-Script-Datei erstellen und diese in das Theme zusätzlich einbinden, aber ich möchte hier den einfachsten Weg aufzeigen, ohne dass man sich noch lange in die JS-Technik einarbeiten muss. Wer möchte, kann natürlich jederzeit später die JS-Funktion auch auslagern. Und natürlich kann man auch ein Child-Theme nutzen, wenn man das möchte.

UND GANZ WICHTIG!
Wie immer gilt bei einer Änderung am WordPress Theme, macht unbedingt eine aktuelle Datensicherung, bevor Ihr Dateien verändert, damit Ihr im Fall eines Tippfehlers immer wieder auf die Ursprungsdatei zurück wechseln bzw. Eure WordPress-Seite wiederbeleben könnt. Also kein Basteln ohne aktuelle Datensicherung!

Nach dem Einfügen des Codes in die custom.js sollte das in etwa so aussehen:
Menü vom Dorayaki Theme nachdem scrollen fixieren

An besten fügt Ihr den Code direkt am Anfang oder am Ende der Textdatei ein, so verhindert Ihr ein versehentliches Verändern einer schon enthaltenen JS-Funktion.

Jetzt die Datei speichern und mit Eurem FTP-Programm in den passenden Theme-Ordner (…wp-content/themes/dorayaki/js) laden. Ich ändere immer die Live-Datei um, bevor ich das mache, also zum Beispiel in custom_alt, dann kann ich bei einem Fehler oder Problem immer sofort wieder auf die mal funktionierende Version zurückwechseln.

Schritt 4. Per CSS die Funktion im Theme ermöglichen

Wenn die custom.js erfolgreich hochgeladen worden ist, müssen wir als Nächstes noch eine Zeile CSS hinzufügen. Diese Zeile wird nur durch die JS-Funktion aktiviert und sorgt dafür, dass unsere Menüleiste sich ab einem bestimmten Punkt fest an den oberen Fensterrand des Browsers heftet.

Auf der Quellseite findet Ihr dafür die Zeile „.f-nav“, diese kann man einfach im Dorayaki-Theme in den Theme-Options unter Custom CSS hinzufügen. Wenn das fixierte Menü genauso aussehen soll wie das nicht feststehende Menü, dann müsst Ihr noch die CSS-Einstellungen wie Background etc. hinzufügen. Wichtig ist aber noch, dass Ihr diese Zeile in einen @media screen Container packt, damit das Fixieren nur in der Desktopversion Eures Themes ausgelöst wird.

Bei mir sieht das dann wie folgt aus:
Menü vom Dorayaki Theme nachdem scrollen fixierenSollte je nach Aufbau Eurer WordPress-Seite sich nicht der ganze Inhalt direkt brav unter das Menü schieben, dann kann ein zusätzlicher Eintrag (#site-nav {z-index:999;}) in der custom CSS unter Umständen das Problem lösen. Wenn alles so weit funktioniert hat, dann sollte nach einer Aktualisierung des Browsers Dein Menü ab einem bestimmten Scroll-Punkt jetzt stehen bleiben. Wenn nicht schon erledigt, dann heißt es jetzt noch den gewünschten Haltepunkt (scrollTop()>) einzustellen. Dazu muss man leider die custom.js immer wieder verändern und so lange per FTP hochladen, bis das Ergebnis den eigenen Wünschen entspricht. Wie schon erwähnt, mit dem Programm Paint kann man das recht genau ausmessen und so die Versuche deutlich reduzieren.

Wie das Ganze am Ende aussehen kann bzw. funktioniert, kann man auf dieser Seite sehen.

Theoretisch kann man diese Funktion auch für jedes andere WordPress-Theme nutzen, wo ein horizontales Menü zum Einsatz kommt. Man muss halt nur die Bezeichnung des NAV Containers entsprechend ändern und natürlich die CSS-Ergänzung der eigenen Optik des Themes anpassen.

Fazit

Wie eingangs schon erwähnt, finde ich eine feste Menüleiste besonders bei langen Seiten, die zum Beispiel auch mit Infinite Scroll arbeiten, also das endlose Aneinanderreihen von Beiträgen, enorm praktisch. Nichts ist nerviger, finde ich, wenn man inmitten von hunderten von Beiträgen das Menü wieder erreichen möchte, gerade auf einem Tablet, und man dafür einige Sekunden lang scrollen muss. Natürlich bietet diese JavaScript-Funktion auch reichlich andere Möglichkeiten, um sie zu nutzen. So kann man damit zum Beispiel auch einen Footer oder ein Werbebanner ab einem bestimmten Punkt mit der CSS-Funktion „Display“ ein- oder ausblenden lassen.

12 Kommentare Schreibe einen Kommentar

  1. Gute Anleitung und wer das ganz perfekt machen will und das nachspringen vom Content verhindern möchte, der fügt einfach eine weitere Funktion (Class) hinzu und gibt dem nachfolgenden Inhalt ein padding-top von der Höhe des Menü mit. Dann scrollt das Ganze übergangslos 🙂

  2. Und gerade gefunden, wer ohne JavaScript den kompletten Header vom Dorayaki Theme fixieren möchte, kann das mit dem folgenden Stück CSS machen.

    @media screen and (min-width:1260px){
    #masthead {position: fixed;background: #ffffff;z-index: 1000;width: 100%;}
    .flexslider.responsive-slider .slide {top: 180px;}
    #main-wrap {padding-top: 240px;}
    }

    • danke danke für den schnipsel css, danach suche ich schon seit einigen Wochen, jetzt kann ich endlich den kopfbereich fixed machen 🙂

  3. Hallo,
    ich versuche als Newbie in einem Child-Theme von twentythirteen die Navigation in der beschriebenen Weise zu fixieren. Leider finde ich die Bezeichnung des aktuellen Menü-Containers in diesem Theme nicht, wie sie hier in Schritt 2 dargestellt ist. Weiß jemand, wo die im twentythirteen zu finden ist? Danke im Voraus!

    • Hallo Gerd, da das Twenty Thirteen Theme etwas anders aufgebaut ist wie das Theme vom ElmaStudio, weichen die Bezeichnungen dort etwas ab. Ein erster Blick zeigt mir, man müsste dort auf den DIV-Container „navbar“ zugreifen. Sollte Dir dieser Hinweis nicht ausreichen, dann bitte nochmal melden und ich schauen mal das ich eine Ergänzung für das Twenty Thirteen Theme erstelle.

      • Hallo Lars,
        ich kann zwar WP mittlerweile sehr gut nutzen und bin auch mit Plugins etc. umfassend vertraut, aber was Themes angeht, mache ich grad meine ersten Gehversuche. Im Twenty Thirteen gibt es keine custom.js, aber eine theme-customizer.js. In die hab ich erst mal den JavaScript-Code aus Schritt 1 angehängt und menu-menue-navigation durch navbar ersetzt.
        Wenn das soweit richtig war, muss ich jetzt die Funktion im Theme verfügbar machen, allerdings stellt Twenty Thirteen keine Theme Optionen, wie das Dorayaki zur Verfügung. Wenn ich das richtig verstanden habe, muss ich das irgendwie in die style.css reinbekommen. Wobei ich mit einem child-Theme arbeite. Kannst du mir bitte noch ein paar Hinweise geben? Danke!

        Gruß
        Gerd

        P.S.: Sorry, zunächst falsch eingetragen. Nun als korrekter reply 😉

        • Hallo Gerd, das CSS kommt in Deine Child-Theme Styles.css rein. Das JavaScript in die theme-customizer.js ganz am Ende einfügen. Wenn es nicht klappt bitte nochmal melden, dann schaue ich mal in den nächsten Tagen wie man das am besten macht in Verbindung mit dem Twenty Thirteen Theme. Bin im Moment unterwegs und kann es das deshalb nicht direkt ausprobieren.

          • Hallo Lars,
            ich komme leider nicht weiter. Hab den CSS-Code in die theme-customizer.js am Ende eingefügt, aber es passiert nix. Um den abgeschriebenen Code zu überprüfen, hab ich das ganze mal im Original dorayaki ausprobiert, also nix mit childtheme. Hab den Code jetzt drei mal verglichen, aber die Navi bleibt nicht stehen 🙁
            Wenn ich jedoch den Code von Sascha oben in die Include Custom CSS von dorayaki packe, funktioniert es, aber das finde ich nicht so elegant, wie deine Lösung.
            Würde mich freuen, wenn du bei Gelegenheit dir das noch mal anschaust. Vielleicht kannst du den Code auch so zum kopieren hier einstellen, dann ist es etwas einfacher, das nachzubauen 😉

            Danke und herzlichen Gruß
            Gerd

          • So inzwischen funktioniert auch bei Gerd das festsetzen der Menüleiste im Twenty Thirteen Theme. Ich habe ein Child-Theme als Beispiel mit angepasster functions.js Datei erstellt. Wer Interesse hat kann sich gerne hier per Kommentar melden und ich sende ihm die zwei benötigten Dateien kostenfrei als Bastelbasis per E-Mail zu. VG Lars

  4. Hallo,

    ich bin ein Frischling im WordPress Umfeld und arbeitete mit dem Theme ‚Zuki‘.
    Ich finde im Ordner /zuki/ js keine entsprechende js Datei als da sind:
    functions.js, html5.js, jquery.fitvids.js, jquery-flexslider.js. Welche Datei kann ich nehmen, um den Code:
    jQuery(„document“).ready(function($){

    var nav = $(‚.menu-hauptmenue_1-container‘);

    $(window).scroll(function () {
    if ($(this).scrollTop() > 136) {
    nav.addClass(„f-nav“);
    } else {
    nav.removeClass(„f-nav“);
    }
    });

    });
    hinzuzufügen?
    Eine zweite Frage betrifft die Veränderung der CSS Datei. Ich arbeite mit Simple Custom CSS. Kann ich da das Coding
    @media screen and (min-width:1260px){
    .f-nav{background: linear-gradient(180deg, white 0%, #E9E9E9 90%);position: fixed;top: 0; width: 100%;}
    .f-main{padding-top:60px;}
    }
    an einer beliebigen Stelle einfügen?
    Danke für Eure Unterstützung. Georg

    • Hallo Georg,

      also die passende JS-Datei ist beim Zuki-Theme die functions.js, dort die JS-Funktion hinzufügen.

      Ja der CSS-Teil kann in die „Simple Custom CSS“ eingetragen werden und sollte dort auch funktionieren.

      VG Lars

Schreibe einen Kommentar



*