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.

Zitat von m.scatello

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:

#header {background: linear-gardient(rgba(0,50,70,0.5), rgba(200,100,50,0.8))} 

selector.elementor-sticky--effects{
   background-color: rgba(255,255,255,1)!important
}
.elementor-sticky--active a{color: #4D4D4D !important}

selector{
   transition: background-color 0.5s ease !important;
}

#d-logo {display: none;}
.elementor-sticky--effects #d-logo {display: inline-block;}
.elementor-sticky--effects #l-logo {
 display: none;}

#sdl {display: none;}
.elementor-sticky--effects #sdl {display: inline-block;}
.elementor-sticky--effects #sll {
 display: none;}

.sub-menu-toggle {display:none;}

http://wordpress.p590843.webspaceconfig.de/

Zitat von m.scatello

Nochmal: ohne es zu sehen, kann man dir nicht helfen

Bei WordPress und gerade beim MegaMenü sind die div's dermaßen verschachtelt, dass man das richtige Element nur mit Hilfe der Entwicklertools des Browsers finden kann.

http://wordpress.p590843.webspaceconfig.de/ Ist jetzt für kurz freigegeben

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:

.jet-menu a:active{background-color:#fff;}

Zitat von basti1012

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 ?

Alles anzeigen

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.

Zitat von m.scatello

Ich befürchte, das lässt sich nur per JavaScript lösen, mit CSS wohl eher nicht.

Okay vielen Dank.