Support » Allgemeine Fragen » Mit z-index Logo über Navigation legen

  • Gelöst radarin

    (@radarin)


    Moin

    Ich habe oberhalb der Horizontalen Hauptnavigation eine Grafik, bestehend aus Logo und einer Person. Die Hand soll nun über die Navigation hinweg greifen. Dafür habe ich#logo den Wert margin-bottom: -48px; zugewiesen. Mit der Standardnavigation vom Template funktioniert das einwandfrei.

    Mit dem Max Mega Menu allerdings nicht.

    Im Menu Plugin kann ich den z-index definieren, dort habe ich den Wert 100 eingegeben, das reicht damit das Ausklappmenu nicht hinter dem Content verschwindet. #logo hat zusätzlich z-index: 200; erhalten. Nützt nichts, egal wie hoch ich den Wert setze. Wenn ich zur Kontrolle zusätzlich einen Rahmen zuweise, wird dieser angezeigt. Der Name sollte also korrekt sein.

    Wenn ich im Firefox mit den Tool mir Levels anzeigen lasse, so hat das Menu 1 und 100, die Grafik 200. Alles scheint zu stimmen, nur leider optisch nicht.

    Hat jemand eine Idee?

    Gruß René

    • Dieses Thema wurde geändert vor 6 Jahren, 3 Monaten von radarin.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 10 Antworten - 1 bis 10 (von insgesamt 10)
  • Das kann so nicht funktionieren, sorry, hatte den Zugriff auf das Menü übersehen (und daher den Code, den ich gepostet hatte, wieder gelöscht). Du kannst keinen Block über das Menü legen, da du dann nicht mehr an die Menüpunkte gelangst.

    Was du höchstens machen könntest, ist, das Foto der Köchin einzeln einfügen. Rechts ist genug Platz zum überlappen.

    Thread-Starter radarin

    (@radarin)

    CSS ist toll, aber manchmal raubt es mir den letzten Nerv. Ohne das MaxMegaMenu brauche ich nicht mal den z-index, einfach nur die Grafik runter ziehen. Und obwohl die (transparente) Grafik komplett über dem Menu liegt, funktioniert es einwandfrei.

    Aber du hast recht, mit deinem Vorschlag macht die Grafik endlich was sie soll, aber die Navigation ist ausgenockt. An der Grafik an sich kann es also nicht liegen. Am Bock? Warum muss der mit nach vorne?

    Naja, ich schau mir mal den Quelltext ohne das Navi Plugin an. Ich möchte ungern an der Header Grafik was ändern, wenn es sich vermeiden lässt. Ich probier da mal etwas rum. Allerdings erst am Wochenende.

    Trotzdem Danke für Deinen Vorschlag.

    • Diese Antwort wurde geändert vor 6 Jahren, 3 Monaten von radarin.

    brauche ich nicht mal den z-index, einfach nur die Grafik runter ziehen. Und obwohl die (transparente) Grafik komplett über dem Menu liegt, funktioniert es einwandfrei.

    Das möchte ich sehen. Das kann nicht funktionieren.

    Grafik, egal ob transparent oder nicht, ist immer ein ganzer Block. In deinem Fall 960px breit. Layers funktionieren wie Folien und werden übereinander gelegt. Was oben ist, lässt keinen (Maus-)Zugriff auf das darunter liegende zu. Die Transparenz ermöglicht die Sichtbarkeit darunter liegender Layer, aber nicht den Mausklick auf diese.

    Das, was du beschreibst, muss eine andere Kombination sein. Farbige Leiste ganz unten, Bild drüber, das Menü selbst in einem eigenen Container außerhalb der farbigen Leiste und über das Bild platziert. Durch die Transparenz des Menüs wird die Köchin sichtbar. Das wäre denkbar.

    Aber das Bild über das Menü (also über die Navigationselemente) platzieren und dann auf die Links klicken können, geht definitiv nicht.

    Ich sehe gerade, dass du die Köchin in ein eigenes Foto gepackt hast. Das ist soweit alles okay, nur musst du jetzt das overflow:hidden entfernen.

    body.full-width-layout #content-outer, body.default-layout #content-outer, body.full-width-no-box #content-outer {
        max-width: 960px;
        overflow: hidden;
        position: relative;
        width: 100%;
        z-index: 201;
    }
    Thread-Starter radarin

    (@radarin)

    Super! das passt 🙂

    Nur schiebt sich noch das Ausklappmenu unter die Sidebar. Hab ich erst am Abend Zeit nachzusehen.

    Ich wollte mal auf die Schnelle nochmals den Urzustand herstellen um es zu demonstrieren dass es eben funktioniert hat, aber mir fehlt gerade die Zeit. Wenn es von Interesse ist, kann ich es am Abend nochmals testen.

    Nur schiebt sich noch das Ausklappmenu unter die Sidebar. Hab ich erst am Abend Zeit nachzusehen.

    Ich sehe das Problem nicht, welcher Browser? Bei der responsive Darstellung gibt es Probleme, aber das hatte ich schon im ersten Post angemerkt.

    Ich wollte mal auf die Schnelle nochmals den Urzustand herstellen um es zu demonstrieren dass es eben funktioniert hat, aber mir fehlt gerade die Zeit. Wenn es von Interesse ist, kann ich es am Abend nochmals testen.

    Auf jeden Fall! Ich weiß, dass es nicht funktionieren kann, daher bin ich gespannt, welche Kombi vorliegt 😀

    Thread-Starter radarin

    (@radarin)

    Mac, Chrome, Firefox, nicht wirklich tragisch, wahrscheinlich fällt es eh nur mehr auf. Und Kontakt bekommt nicht mahr als 2 Einträge.

    • Diese Antwort wurde geändert vor 6 Jahren, 3 Monaten von radarin.
    • Diese Antwort wurde geändert vor 6 Jahren, 3 Monaten von radarin.
    Thread-Starter radarin

    (@radarin)

    ok, ich konnte es jetzt wieder herstellen und lass das mal so stehen.

    Die Hand schiebt sich nun zwischen Hintergrund der Navi und den Text. Das war mir noch gar nicht aufgefallen, da ich erst jetzt zu Testzwecken mehr Menueinträge gemacht habe. Zugriff aufs Navi funktioniert, der Hoover schaut etwas unschön aus da er sich wiederum über die Hand legt. Aber das ist nicht relevant.

    Da sich die Grafik unter dem Text befindet ist klar, weshalb das Menu funktioniert.

    • Diese Antwort wurde geändert vor 6 Jahren, 3 Monaten von radarin.
    • Diese Antwort wurde geändert vor 6 Jahren, 3 Monaten von radarin.

    Richtig, die Menüpunkte müssen über der Grafik liegen, sonst funktioniert es nicht. DAS ließe sich auch mit dem Meganmenü herstellen.
    Du könntest Balken und Köchin auch als Hintergrundgrafik erstellen, position bottom im Header. Das Menü dann ganz ohne Background einfügen.

    Mac, Chrome, Firefox, nicht wirklich tragisch, wahrscheinlich fällt es eh nur mehr auf. Und Kontakt bekommt nicht mahr als 2 Einträge.

    Nein, das war bei mir nicht so. Liegt vermutlich am unterschiedlichen Viewport.

    Thread-Starter radarin

    (@radarin)

    Content und Menu hatten den selben z-index. Jetzt überlagert das Menu den Content wieder.

    Die Hand greift über das Menu, da ist es unrealistisch einen Text über die Hand zu legen. Da ich den Platz unter der Köchin für das Menü nicht benötige, passt das schon so.

    Auf dem Handy schaut es auch einigermassen ok aus, das Logo ist etwas weit oben, das will nicht runter, aber das ist auch egal. Das MaxMegaMenu lässt sich beidseitig ausrichten. Das Design ist zweitrangig, da ist eh alles so klein. Wichtig ist, dass die Inhalte gut gelesen werden können und dass die Navigation gut zu bedienen ist. Ein Telefon ist schliesslich zum telefonieren da.

    Ich danke dir jedenfalls für die wertvolle Hilfe. Jetzt wird die nächste WordPress Seite eingerichtet.

Ansicht von 10 Antworten - 1 bis 10 (von insgesamt 10)
  • Das Thema „Mit z-index Logo über Navigation legen“ ist für neue Antworten geschlossen.