Background der Navbar gezielt verändern

Hallo Miriam,

das ist ein bisschen kniffelig.

Also generell würde ich erstmal das "!important" rausnehmen. Wenn ich das richtig sehe, hat das in dem Fall eigentlich keinen Vorteil und erschwert nur das jeweilige Überschreiben.
Warum hast du es denn überhaupt auf !important gesetzt? Wenn ich es rausnehme funktioniert hier trotzdem alles korrekt (schient zumindest erstmal so).

Zu Punkt 1)
Du kannst die einzelnen Seite über die Body-Class ansprechen. Beim Warenkorb ist das "woocommerce-cart".
Die Klassendefintion wäre also:

.woocommerce-cart .navbar-custom {
background-color: rgba(10, 10, 10, 0.9)
}

Für die Seite "Kasse" müsste es "woocommerce-checkout" sein (kann ich bei dir gerade nicht prüfen, weil man keine Produkte in den Warenkorb legen kann).
Aber vermutlich müsste es folgendermaßen funktionieren:

.woocommerce-checkout .navbar-custom {
background-color: rgba(10, 10, 10, 0.9)
}

Zu Punkt 2)
Das ist leider nicht so einfach machbar. Das ein/ausblenden ist nicht direkt über CSS gelöst, sondern über Javascript. Das heißt, man müsste die entsprechende Funktion in den Javascript Dateien suchen und umschreiben (oder eine zweite FUnktion für die Unterseiten ergänzen). Das dürfte nicht so wahnsinnig kompliziert sein, kann ich aber so nicht wirklich simulieren...

Ich hoffe, es hilft dir trotzdem ein bisschen.

Viele Grüße,
Daniel

Sehr gern.

Das mit dem Javascript ist ansich auch keine große Sache, aber man muss halt mal in den Dateien nach der Funktion suchen und die dann entsprechend anpassen.

Zum Submenü:

Ich weiß gerade nicht genau, wie du es nach links gerückt hast. Aber ich vermute mal, hiermit:

.sub-menu .menu-item {

left: 20px !important;

position: relative;

}

Das passt von der Hierarchie nicht, weil du damit auch das Overlay (also das weiße halbstransparente, was erscheint, wenn man mit der Maus darüber geht) mit einrückst.

Nimm mal die left: 20px !important oben wieder raus und ergänz mal folgende Klassendefinition:

.navbar-custom .sub-menu > li > a, .navbar-custom .children > li > a {
padding-left: 38px;

}

Die rückt nur Bild und Text ein und lässt den Menüpunkt ansich an seiner ursprünglichen Position. Die 38px musst du ggf. noch ein bisschen "feintunen", bis es mittig ist.

Das ist leider schwer zu sagen, weil man sich in Javascript die Funktionsnamen frei ausdenken kann/darf.

Wahrscheinlich findest du die entsprechende Funktion in einer der js-Dateien im Theme Verzeichnis. Im grunde lässt sich auch die Funktion selbst auf unterschiedliche Wege umsetzen, so dass ich nicht ganz genau weiß, wie die aussehen müsste/könnte. Aber vermutlich enthält sie irgendwas mit "offset", „navbar-transparent“ und wahrscheinlich „addClass“ und „removeclass“.