Passender CSS Selektor für URL-Auswahl

  • Ich versuche mich an einem Webshop und habe eine Beispielseite erstellt.

    Im Wordpress Theme Ocean-WP rutschen die Produkte in der EInzelauswahl jedoch unter die Menüleiste.

    https://www.homepageservice-br…eis-bei-fahrten-ab-20-km/

    Da ich hier schon viel in den Theme - Einstellungen erfolglos probiert habe, möchte ich einfach die Seiten mit den einzelnen Produkten um 100 px nach unten schieben:



    #main #content-wrap[href*="produkt"] { padding-top: 100px;}

    funktioniert leider nicht.


    Herzlichen Dank für Eure Hilfe

    rockpianist

  • Das Problem ist die Positionierung des Headers, der ist mit 'position: fixed; (als inline Format - offensichtlich mittels JS eingefügt)

    Als Fixed Element belegt es keinen Platz (hier Höhe) im Elementenfluss und somit können folgende Elemente unter dieses Fixed Element rutschen - es wird dann angezeigt an einer Position, wo das vorgehende Element noch gar nicht beendet ist... dieses sitzt eben fixed und kümmert sich nicht um die umliegenden Elemete!

    Ein möglicher Ausweg wäre, aus dem Fixed Element ein Sticky Element zu machen, dann belegt es Platz im Elementenfluss und Folgeelemente würden erst dahinter eingefügt:

    Einfach mal testen ...

    Code
    1. #site-header {
    2. position: sticky !important;
    3. }
  • Ich dachte, er "sieht" sich die URL an, die in der Browserzeile steht und "entscheidet" dann, ob er die css - Anweisung ausführt oder nicht.

    Nein. Der Selektor sucht alle Elemente mit der ID site-header die ein href-Attribut haben in dessen Wert "produkt" vorkommt - da dein div natürlich kein href-Attribut hat/haben kann, passiert natürlich nichts.

    Mit reinem CSS geht das was du vor hast nicht, da brauchst du eine Priese JS dafür (wenn in der URL der Wert "produkt" vorkommt per JS an <body> eine Klasse dranhängen und über einen entsprechenden CSS-Selektor position setzen).