Support » Themes » Twenty Seventeen: Interner Anker schiebt Seite unter fixiertes Header-Menü

  • Gelöst jela

    (@jela)


    Hallo,

    ich verwende das Theme „Twenty Sventeen“ und möchte auf einer Seite mit gesetzten HTML-Anker für einzelne Blocks (Überschriften) am Anfang der Seite Sprungmarken als (interne) Links auf der Seite setzen. Wenn ich die Links z. B. mit „#Anker1“ setze und anwähle, schiebt sich der Anfang unter das horizontale Menü, das bei „Twenty Sventeen“ beim scrollen fixiert ist. Ich habe schon hier Forum und im Netz versucht eine Lösung zu finden. Das Problem wird zwar mancherorts beschrieben, aber etwaige Lösungen sind leider bei mir erfolglos geblieben.

    Hat jemand einen Rat oder Hinweis?

    Schöne Grüße
    jela

    • Dieses Thema wurde geändert vor 5 Monaten von jela.
Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)
  • Hallo,
    das Problem kenne ich.
    Als Workaround setze ich vor dem eigentlichen Ziel über den Block-Editor (Gutenberg) einen Abstandshalter und setze darauf den Anker.
    Wenn du dann noch die URL oben einträgst, dann können wir uns das auch ansehen und dir sicher besser helfen.
    Viele Grüße
    Hans-Gerd

    Moderator Bego Mario Garde

    (@pixolin)

    Du könntest z.B. mit einer JavaScript-Funktion einrichten, dass nicht ganz so weit runtergescrollt wird. Dazu fügst du in der functions.php eines Child-Themes oder mit dem Plugin Code Snippets folgenden Code ein:

    add_action( 'wp_head', function () { ?>
    <script>
    
    	 !function(o,n){var t=function(){var n=o(":target"),t=100;n.length>0&&o("html, body").stop().animate({scrollTop:n.offset().top-t},200)};o(n).on("hashchange load",function(){t()})}(jQuery,window);
    
    </script>
    <?php } );

    Das gilt dann für alle Anker.

    Die recht pragmatische Lösung von Hans-Gerd gefällt mir aber auch, vorausgesetzt du bist mit den Abständen einverstanden, die dadurch erzeugt werden.

    Nachtrag:
    Wenn ein größerer Abstand über Zwischenüberschriften erlaubt ist, kannst du auch im Customizer die CSS-Regel h2.anker-mit-offset{ padding-top: 150px; } einfügen und dann der Zwischenüberschrift über die Sidebar unter „Erweitert“ [1] einen Anker-Namen [2] und die CSS-Klasse [3] (bitte hier ohne den Punkt) zuweisen:

    Screenshot Einstellungen
    (zum Vergrößern anklicken)

    Thread-Ersteller jela

    (@jela)

    Hallo zusammen,

    danke für die schnellen Rückmeldungen.

    @hage
    Etwas ähnliches hatte ich auch schon probiert, in dem ich eine Trennlinie zwischen den Textblöcken eingefügt und da den Anker gesetzt habe. Optisch zieht dies allerdings die Textblöcke etwas auseinander, was wiederum beim scrollen unschön daher kommt. Ich kann die Webseite leider noch nicht verlinken, da sie noch nicht öffentlich ist und über ein Plugin eine Vorschaltseite mit „Wartungsmodus“ greift.

    @pixolin
    Deinen Vorschlag habe ich mit dem Plugin Code Snippets ausprobiert und es funktioniert. Vielen Dank!

    Wo ich hier gerade die Experten habe, erlaube ich mir noch ein ergänzende Frage:
    Wie kann man denn bei „Twenty Sventeen“ am besten eine „Zurück nach oben“-Funktion realisieren?

    Beste Grüße
    jela

    Moderator Bego Mario Garde

    (@pixolin)

    Abgesehen von diversen Plugins, die ein „Zurück nach oben“-Icon mit Link einfügen, kannst du auch im Footer Text oder ein Bild mit einem Link einfügen:
    <a href="#top">Zurück nach oben</a>

    (Den Anker #top brauchst du dann nicht mehr einfügen, der wird von jedem Browser als „Start des Dokuments“ interpretiert.)

    Hallo @pixolin,
    das ist natürlich eine viel bessere Lösung als die von mir 👍
    Viele Grüße
    Hans-Gerd

    Moderator Bego Mario Garde

    (@pixolin)

    @hage Hat da gerade jemand „Streber“ gerufen? 😀

    @pixolin nenene – war in der Tat schon ernst gemeint. 😉

    Thread-Ersteller jela

    (@jela)

    @pixolin
    Okay, ein Element (Text/Grafik) mit dem Link „#top“ ist eine simple Lösung. Danke auch für diese Info.

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)