Problem bei Kombination Sticky Menu und Ankerlink

    Hallo an alle :)


    ich stehe vor folgendem Problem:


    Auf http://20220204testnonsticky.l…rts.com/index.php?lang=en verwendete ich Ankerlinks im Inhaltsverzeichnis.


    Wenn ich nun auf einen Ankerlink klicke, sieht es leider unschön aus, da das Stickymenu die Überschriften überdeckt.


    Um das Problem zu lösen müsste ich entweder


    - Das Headermenu "Non-Sticky" machen


    oder


    - Die Seite an eine etwas höhere Position als den Anker springen lassen.


    Hat jemand eine Idee wie ich dies bewerkstelligen könnte?


    Besten Dank und viele Grüße,


    Stefan

    Die einfachste Variante ist per CSS und scroll-margin-top bzw. weitere, ähnliche.


    https://caniuse.com/?search=scroll-margin-top


    Meist verwende ich zusätzliches JS, das erst kalkuliert, ob das nötig ist bzw. wie hoch der header oder anderes sticky-Element in Summe ist. Aber geht auch ohne (PixDaumen).


    Und Browser, die das nicht verstehen, das CSS, sind mir mittlerweile wurst, weil moderne das mittlerweile alle verstehen.

    Vielen Dank für Eure schnellen Antworten und Hilfe :)


    @ Dirk : Die Idee hatte ich auch schon, aber ich denke dies könnte zu Problemen bei eventuellem späterem Templatewechsel, etc. führen


    Re:Later : Ich müsste also an irgendeiner Stelle so etwas wie scroll-margin-top: 30px; einfügen, oder? Geht dies über die custom.css?


    Ich habe es gerade einmal mit


    a id {

    scroll-margin-top: 50px;

    }


    versucht, was aber leider nicht geklappt hat.


    Vielen Dank noch einmal!