Sticky Header -> Zentrieren (Wordpress / Avada Theme 3.4.3)
 

Hallo,
ich möchte auf einer Webseite für einen Kunden den Sticky-Header zentrieren der beim herunter scrollen auftaucht. Besser gesagt das Menü in dessen. Alle meine Versuche das Menü mit float, margin oder positions tags zu zentrieren blieben bis jetzt absolut erfolglos. Bei Positionierungen in 50% verschiebt sich das Menü viel zu weit. Ich weiß nicht ob mir übergeordnete Tags dabei in die quere kommen.

Ich will das Menü im Sticky Header auf der exakt gleichen Position wie das eigentliche Main-Menü der Seite haben.

Das Main-Menu wird mit

zentriert. Das funktioniert aber leider nicht im Sticky-Header.

Habt ihr eine Idee?

Die Seite lautet www.ds.windrad-online.de

Folgendes machen:

- bei nav#nav, nav#sticky-nav das float: right entfernen
- der ul darin gibst du text-align: center
- die li und a Elemente bekommen display: inline und dürfen NICHT floaten

Dann wirst du allerdings die Dropdowns noch etwas anpassen müssen, weil die neuen Styles sich natürlich auch auf die li's und a's darin auswirken.

Hallo, danke für dein Antwort.

Doch leider funktioniert es immer noch nicht.

Ich habe folgenden Code hinzugefügt:

Die li's dürfen ebenfalls nicht floaten und benötigen ein display:inline.

Du sprichst in deiner letzten Anweisung nur die a Tags an, hast also die li's vergessen

Arbeite mit Kindselektoren Elternelement > Kindelement Dann betrifft eine Regel auch nur die Elemente erster Ebene.

Tatsache! Vielen Dank! :D

..und wie sag ich jetzt dem Dropdown Menü das er die vorherigen Einstellungen behält. Das ist so ja jetzt völlig zerstört.

Der Vorschlag von Thielo klingt natürlich gut :D

ok, also mit child elementen. ich versuche das gleich mal umzusetzen. danke

hallo nochmal,

ich weiß zwar das ich mit child-elementen arbeiten muss, nur weiß ich nicht welches tag ich direkt ansprechen muss, oder welches ich auslassen muss.

Bei mir zerstückelt sich alles, jedoch ohne erwünschtes Ergebnis.

Muss ich nur das erste Tag ansprechen mit :nth-child(1) ?

Mein jetziger Code schaut so aus:

Achso ihr meint mit den '>' und '<' elementen

Ich weiß nicht wie ich die richtig einsetzen muss. :(