Hintergrundfarbe bei Menüaktivierung

  • Hallo zusammen,


    ich arbeite mit WordPress und Elementor und habe bereits einen StickyHeader erstellet welcher transparent ist und beim scorllen weiß wird.

    Nun ist in diesem Header auch ein Menü mit einem Dropdown. Ich möchte nun, wenn ich auf einen Menüpunkt klicke (oberste Menüebene) das der Header auch weiß wird.


    Es sieht total bekloppt aus, wenn man noch nicht gescrollt hat sprich der Header ist noch transparent (also wirklich ohne Farbe) und aus dem nichts klappt sich beim Klick auf einen Menüpunkt das weiße Dropdownfeld aus.


    Ich kann leider die Seite nicht zeigen, da diese noch einen kompletten Verzeichnisschutz hat.

    Vielleicht gibt es ja trotzdem eine Möglichkeit mir mit dem CSS dazu zu helfen.


    Als Menü nutze ich das MegaMenü von JetElements.

  • Nein, ohne es zu sehen, kann man dir nicht helfen. Das MegaMenü hat aber einige Einstellungen, hast du dich da mal durc

    Ich kann gerne mal den Code den ich bisher habe posten:

  • Wenn ich folgendes eingebe, dann ändert sich natürlich nur der entsprechende Link im Menü, jedoch soll sich ja der gesamte Headerbereich einfärben.
    Weiterhin klappt das entsprechend nur wenn die Maus gedrückt bleibt. Sobald man die Maus loslässt wird es wieder wie vorher:


    Code
    1. .jet-menu a:active{background-color:#fff;}
  • Das ist echt eine verschachtelte div Suppe.

    Viel zu viel Klassen Namen.

    Ist aber halt so.

    Ich würde ein Javascript erstellen was beim klick auf dem Menü, dem Header eine Klasse gibt.

    Mit CSS alleine wird das nicht gehen, dafür ist es zu weit verschachtelt.


    Vielleicht irre mich auch da.

    Ist das Menü ein Plugin für WP?

    WP ist nicht mein Fach, deswegen frage ich mal, ob man da sowas nicht einstellen kann ?

  • Vielen Dank erstmal.


    Ja ist WP und nein, ich kann zwar einstellen, das sich das Menü einfärbt (auch nur solange ich draufklicke und halte), aber nicht der gesamte Header.


    Wäre es nicht einfacher:


    Ich habe ja ein Container, welcher nur 1px hoch ist, damit der Sticky-Header erst Transparent ist und dann beim scrollen aktiviert wird uns sich somit weiß färbt.

    Wenn dieser Container nicht da wäre, wäre ist Sticky-Header automatisch aktiv.

    Ist es CSS oder JavaScript mäßig einfacher diesen Container bei Menüaktivierung (sobald ein Dropdown aufgeht) unsichtbar zu machen, ähnlich wie ich es mit den zwei Logos gemacht habe? Hier ist eines nur aktiv wenn sticky-header aktiv ist und das andere ausgeblendet,.... usw.

  • Ich habe ja ein Container, welcher nur 1px hoch ist, damit der Sticky-Header erst Transparent ist und dann beim scrollen aktiviert wird uns sich somit weiß färbt.

    Wenn dieser Container nicht da wäre, wäre ist Sticky-Header automatisch aktiv.

    Möchtest du das den so haben?

    Dann kommentiere den Container aus oder lösch ihn.

    Du solltest zum Testen aber erstmal auskommentieren damit du nichts Falsches löschst.


    Hast du schon was geändert?

    Beim klick auf das Menü wird de Header jetzt zur Hälfte weiß , da ist ein Gradient drin.


    WP ist nicht mein Thema und weiß auch nicht was die da so machen.

    Dein Header (<section>) hat einmal ein Data-Settings Attribute wo die Styls von den Header angegeben werden.

    Ich finde auf der schnelle auch nicht wie der Gradient in den Style kommt.

    In der CSS finde ich es nicht und im style Attributte auch nicht.


    Soll der Header jetzt dauerhaft weiß sein?