CSS Anpassung überlagert Link

[michaelxxx]

Hallo zusammen,

ich suche nach Hilfe für eine CSS Anpassung auf meiner Seite.

Ich nutze Wordpress und hier das Plugin "Table of Content", um automatisch ein Inhaltsverzeichnis zu erstellen. Bei Klick auf eines der Kapitel springt man zu dem entsprechenden Absatz. Allerdings verläuft das springen wegen dem sticky Menü nicht ganz korrekt und die ersten Zeilen verschieden quasi unter dem Menü.

Das konnte ich umgehen, in dem ich der entsprechenden Klasse folgenden CSS Code hinzugefügt habe:

.ez-toc-section {
padding-top: 70px;
margin-top: -70px;}

Das klappt auch soweit :)

Ein Nebeneffekt von der Positionierung ist jetzt aber die Überlagerung von Links. Ich kann derzeit also nicht mehr auf den Amazon Link klicken, da der von dem padding Feld (das lilane) jetzt überlagert wird: Beipielseite

Hat jemand eine Idee, wie ich das anders lösen könnte?

Wäre für Hilfe echt dankbar.

Viele Grüße
Michael

 

[Rayse]

Was für ein Sticky Menü? Funktioniert bei mir ohne die CSS-Änderung tadellos. Mit der Änderung ist der Sprung nicht korrekt und zu viel Abstand nach oben.

 

[michaelxxx]

Die Anmerkung verstehe ich jetzt nich so ganz.

Wenn Du nach unten scrollst, dann bleibt doch oben das Menü bzw. der schwarze Balken mit "Home | Reiseberichte |..." usw. steht. Das ist das sticky Menü.

Wenn Du auf ein Kapitel im Inhaltsverzeichnis klicks, dann scollt es ohne die CSS Anpassung bis zum ersten Text des Absatzes - aber die Headline verschwindet unter der sticky Menü Leiste. Mit meinem CSS Code ist die Headline bei mir sichtbar. Ist das bei Dir nicht so?

 

[Rayse]

Ohne Javascript funktioniert das ohne Probleme. Irgendein fancy JS-Feature macht aber nach dem Sprung zum Anchor noch einen zusätzlichen Scroll, um ein paar Pixel. Die Lösung des Problems liegt also eigentlich an anderer Stelle und hat mit HTML nichts zu tun (sondern mit JS). Der HTML-Code funktioniert (ohne JS).

 

[michaelxxx]

Danke für Deine Antwort. Allerdings hilft mir das jetzt nicht weiter, da ich am JS des Plugins kaum etwas verändern kann.

Daher die Frage, wenn ich meine CSS Anpassung nutze, wie kann ich es dann machen, dass der Bereich wieder klickbar ist? Gibt es dafür irgendeinen Trick?

 

[Rayse]

Mach' mal ein Block-Element draus:

.ez-toc-section {
    padding-top: 70px;
    margin-top: -70px;
    display: block;
}

 

[basti1012]

vieleicht reicht es auch den Container einfach ein margin-top zu geben

.x-main.full {
    /* float: none; */
    /* display: block; */
    /* width: auto; */
    margin-top: 50px;
}

 

[michaelxxx]

Das mit dem block hat funktioniert! Vielen Dank :)