roll-button Content fährt zu weit hoch

    Hallo zusammen,

    auf meiner Seite http://talhochzeit.de/ habe ich einen roll-button. Wenn ich auf den klicke, dann scrollt die Seite runter zum Contentbereich. Leider verschwindet die Überschrift der Seite unter dem Menü am oberen Bildschirmrand. Wie bzw. wo kann ich dies ändern? Ich habe schon in der style.css gesucht, doch die richtige Stelle nicht finden können. Im Notepad++ habe ich nach dem roll-button gesucht, dort zwar 25 Einträge gefunden, aber nichts dabei, was mir irgendwie weiterhelfen würde. Könnt ihr mir helfen?! Ich bin noch relativ neu auf dem Gebiet, daher bitte ich um Nachsicht :wink:

    Danke im Voraus!

    Gruß
    loewenherzl

    • 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

    Hallo,

    als Erklärung: Der Button ist technisch gesehen ein Link, der zum anchor "primary" führt (angegeben im href-Attribut des Links) - und an dieser Stelle verschwindet dann die Überschrift bereits, da das semitransparente Menu nicht berücksichtigt wird.
    Zwei Möglichkeiten:
    In der CSS-Datei könntest Du den Inhalt noch weiter nach unten schieben, da er ja ohnehin bereits etwas vom Hero-Bild abgesetzt ist, bspw. so:

    Code
    #main:margin-top:2rem;

    Oder Du könntest im JavaScript, das die Scroll-Verzögerung enthält, einen anderen Abstand einstellen, was vermutlich etwas komplizierter sein wird.

    Danke für die schnelle Antwort und Deine Erklärung, die für mich sehr hilfreich ist. Jedoch weiß ich nicht genau, wo ich den Code finde, den Du aufgeführt hast. Muss ich das irgendwo in die CSS mit einfügen und wenn wo?! Welche Deiner zwei Lösungen ist denn die bessere? Kompliziert macht nichts, ich lerne gerne dazu :smile:

    Das hängt ganz von Deinem Theme ab. In vielen Fällen vermutlich die style.css-Datei. Dort könntest Du nach "#main" suchen oder es einfügen. Dies aus der Ferne zu sagen, ist jedoch recht schwierig.
    Für die JavaScript-Lösung müsstest Du die entsprechende .js-Datei Deines Themes finden, in der die scroll-Funktion steht - auch hier: schwierig als Ferndiagnose.
    Welche Variante besser ist, ist ebenfalls schwierig zu sagen, da zunächst geschaut werden müsste, inwiefern sich dies auf andere Seiten des Themes auswirkt.

    Wenn ich in der style.css nach #main suche, dann bekomme ich gefühlt 100 Treffer angezeigt. 100% davon heißen jedoch #mainnav. Nur #main kann ich nicht finden. Wo genau soll ich denn Deinen o.g. Code einfügen in der style.css? Ich habe ihn bereits an mehrere Stellen einfach mal getestet, doch es passiert nichts :???:

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden