Menü auf der Startseite nach unten schieben...

    Nabens zusammen...

    auf einer Seite im Onepage-Stil habe ich etwas entdeckt, dass ich gerne auch auf meiner Seite hätte.
    Es geht um das sogenannte Hauptmenü. Obwohl es nur recht klein und kurz ist bei mir, gefällt mir das aber überhaupt nicht.

    Ich hätte das gerne komplett weg von dem Startbild, aber eben nicht von der Startseite. Wenn ich runterscrolle, oder auf den Button "Start" klicke, soll es dann schon erscheinen, und auch stehen bleiben, egal wie weit man runter scrollt. Auf den einzelne Seiten oder Beiträgen darf das auch gerne so bleiben, wie es jetzt ist.

    Ist das möglich? Wenn ja, wie mache ich das? Will deswegen nicht das ganze Theme wechseln, denn so gefällt's mir gut, nur das mit dem Menü stört mich. Hier noch die Seite, um die es geht... http://borchertsupport.com

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Lösungsansatz mittels CSS:

    Code
    .site-header.float-header {
	display: block;
}
.site-header.fixed {
	display: none;
}

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    mhm, funktioniert leider nicht... damit steht es immer noch oben auf dem Slider.. es soll aber erst erscheinen, wenn ich den Slider quasi weggescrollt habe...
    das geht so nicht, oder? dafür bräuchte ich ein onepage-theme, oder?

    Ich hatte ja geschrieben das es ein Lösungsansatz ist. Du wolltest unter anderem das es bei einem Klick auf den Startbutton funktioniert, das tut es weil dann der Slider weg ist. Jetzt muss man halt ein wenig kreativ werden und das Menü eben unter dem Slider einbinden und dann sticky halten wenn es oben ankommt. Oder via Javascript prüfen ob der Slider außerhalb des Viewpoints liegt und dann das Menü einblenden. Lösungen gibt es einige.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    nein das mit dem Start-Button ging auch nicht, mit dem CSS Code war es so, als wenn man "static" auswählt.. also dass es nur oben angezeigt wird, und beim scrollen nicht mitgeht...

    Nimm einfach aus der [COLOR=#0000cd]header.php[/COLOR] diese Zeilen

    PHP
    <div class="col-md-8 col-sm-4 col-xs-12">
                    <div class="btn-menu"></div>
                    <nav id="mainnav" class="mainnav" role="navigation">
                        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'fallback_cb' => 'sydney_menu_fallback' ) ); ?>
                    </nav><!-- #site-navigation -->

    unter verpflanze sie unter diese Zeile aus derselben Datei

    PHP
    <div class="header-image"><?php sydney_header_overlay(); ?></div>

    okay. zumindest ist das Menü nun "ausgeblendet" .. weg vom Startbild.... das ist schon mal gut :-)

    wie schaffe ich es denn jetzt, dass es wieder eingeblendet wird, wenn ich bis unter den Slider gescrollt habe.. ?

    Zitat von tbs-admin

    (...)
    wie schaffe ich es denn jetzt, dass es wieder eingeblendet wird, wenn ich bis unter den Slider gescrollt habe (...)

    Es ist schon da, wenn man den Quellcode entsprechend der Vorgabe oben modifiziert, Du siehst es nur nicht, weil es weiß auf weiß dargestellt wird, markier mal dem Bereich vom Rand weg mit gedrückter linker Maustaste. Müsste man also jetzt noch farblich anpassen...

    ja supi.. bischen rum gefrickelt an den Farben, das funktioniert..... scrollt aber nicht mehr mit weiter runter... obwohl sticky eingestellt ist... hast du da evtl. auch noch eine Idee :)

    Zitat von tbs-admin

    (...) obwohl sticky eingestellt ist... hast du da evtl. auch noch eine Idee (...)

    Müsste man jetzt noch per CSS definieren, aber dazu dann noch allerlei anderes, z.B. das Verhalten für die responsive Darstellung auf kleinen Bilderschirmen (z.B. bei welcher Breite dann doch nicht mehr sticky etc.) - Daher schlage ich dafür einfach dieses Plugin vor

    https://wordpress.org/plugins/sticky…hing-on-scroll/

    Als Sticky Element wählst Du dabei im Plugin [COLOR=#0000cd]#mainnav[/COLOR], alle weiteren Einstellmöglichkeiten dürften dann selbsterklärend sein.

    funktioniert leider nicht.. aber ich suche noch bischen weiter.. vielleicht kriege ich es ja doch mit CSS hin... position fixed geht auch nicht, dann verschwindet das Menu wieder ganz..

    Zitat von tbs-admin

    funktioniert leider nicht (...)

    Also, ich habe das Ganze jetzt mal extra im Detail mit der kostenlosen Variante Deines Themes und dem genannten Plugin ausprobiert und es klappt in meiner Testumgebung einwandfrei, der Selector [COLOR=#0000cd]#mainnav[/COLOR] ist bei beiden Themevarianten derselbe.

    Daher nochmal Schritt für Schritt (es gibt auch div. andere, z.T. sicher auch elegantere Lösungen der Umsetzung, aber ich kenne das Theme so gut wie nicht und bin daher auch nicht tiefer in den Quellcode eingestiegen, als es eben zur Umsetzung Deines Ansinnens gerade nötig war):

    - Die [COLOR=#0000cd]header.php[/COLOR] nach den Vorgaben ändern (die Schriftfarbe noch anpassen, vielleicht wurde hier ein Fehler gemacht(!)).

    - Das o.g. Plugin installieren und aktivieren.

    - In dessen Einstellungen als Selector unter [COLOR=#006400]Sticky Element [/COLOR][COLOR=#0000cd]#mainnav[/COLOR] wählen.

    - Dann noch ggf. unter [COLOR=#006400]Space between top of page and sticky element[/COLOR] einen passenden Wert eingeben um den Fixierhöhe des Menüs etwas nach unten zu versetzen.

    - Die übrigen Einstellungen zum responsiven Verhalten nach Bedarf einstellen.

    Und wenn das alles nicht wie gewünscht funktionieren sollte (in meiner Testumgebung tat es das allerdings), bei [COLOR=#006400]Dynamic mode[/COLOR] testweise einen Hake setzten oder ggf. mittels aktiviertem [COLOR=#006400]Debug mode [/COLOR]nach einem Fehler suchen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden