[ERLEDIGT] Dropdown in Vordergrund

[Curved]

Hallo zusammen,

ich habe auf meiner Seite zwei Navigationen mit einem Slider dazwischen. Die untere Navigation liegt über der oberen, da diese ein Logo enthält, das wie ein Siegel über die andere Navigation fährt. Nun hat die obere Navigation aber unter dem Punkt "Location" ein Dropdown, das nun logischerweise unter der zweiten Navigation verdeckt wird, was aber natürlich so nicht sein sollte. Kann mir hier jemand helfen, wie ich das Dropdown in den Vordergrund bringe, ohne die zweite Navigation nach hinten schieben zu müssen?

Hier ein vereinfachtes fiddle: https://jsfiddle.net/mediago/4mr9bo0q/
(Im Fiddle das Vorschaufenster breiter ziehen, damit nicht die Responsive-Navi greift)

Und hier der Link zur Webseite, da wird auch die Thematik mit dem Logo deutlich:
http://jp.mediago.de

Vielen Dank im Voraus,

Curved

 

[SpiceLab]

Nun hat die obere Navigation aber unter dem Punkt "Location" ein Dropdown, das nun logischerweise unter der zweiten Navigation verdeckt wird, was aber natürlich so nicht sein sollte. Kann mir hier jemand helfen, wie ich das Dropdown in den Vordergrund bringe, ohne die zweite Navigation nach hinten schieben zu müssen?

Logischerweise... Du sagst es

Für alle interessierten Mitleser der relevante CSS-Schnipsel:

#nav { /* Navi oben */
  ...
  z-index: 10; /* < 12 = Schichtposition auf z-Achse niedriger */
}
nav { /* Navi unten */
  ...
  z-index: 12; /* > 10 = Schichtposition auf z-Achse höher */
}

Spricht was dagegen?

1. z-index drehen.
   
2. Logo in beiden Navigationen integrieren.
   
3. Beim Seitenaufruf per CSS-Klasse auf un|sichtbar setzen.
   
4. Bei gewünschter Scrollposition den Zustand tauschen.
5. Viermal "Nein"? Dann vielleicht sogar auf betonte Weise, mit einem "Überblendeffekt".
   
6. Bspw. Transparenz und eine der Fade-Funktionen https://api.jquery.com/category/effects/fading/
7. Oder ein ausgetüfteltes (verspieltes) Bewegungsmuster per https://api.jquery.com/animate/, oder oder, ...
   
8. Das Auge isst doch bekanntermaßen mit

 

[Curved]

Hallo Spicelab,

vielen Dank für deine Antwort und Ideen, damit kann ich erstmal weiterarbeiten.

Curved

 

[SpiceLab]

Hallo Spicelab,

vielen Dank für deine Antwort und Ideen, damit kann ich erstmal weiterarbeiten.

Curved

Freut mich, dass mein Brainstorming doch glatt Anklang gefunden hat

Viel Erfolg! :)