Form des Headerbildes ändern und Menu auf den Header legen

  • Gelöst Magic-Komplex

    (@magic-komplex)


    vor 7 Jahren, 5 Monaten

    Hallo,
    ich arbeite normalerweise mit dem Weaver Xtreme Theme, da es im Grunde unendlich anpassbar ist, vor allem in Kombination mit dem Themify Builder. Jetzt muss ich allerdings etwas umsetzen, wofür ich keine Lösung finde.

    Die Form des Headerbildes und des Footers soll nicht rechteckig sein sondern nach unten hin spitz zulaufen (beim Footer dann nach oben hin) und zusätzlich soll die Menuleiste auf dem Headerbild liegen, am liebsten noch mit einer Logografik in der Mitte, rechts und links soll sich das Logo in eine Menuleiste verlängern.

    Habe nach Themes gesucht mit denen das wenigstens ansatzweise umsetzbar wäre, aber nichts gefunden und frage mich jetzt, ob und wie man die Form des Headers/Footers, sowie die Position der Menuleiste mit CSS irgendwie anpassen kann.

    Wenn mir da jemand behilflich sein könnte wäre ich sehr dankbar.

Ansicht von 2 Antworten – 1 bis 2 (von insgesamt 2)
  • Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 7 Jahren, 5 Monaten

    Beim Headerbild fallen mir spontan verschiedene Möglichkeiten ein:

    • Bild vor dem Hochladen im Bildbearbeitungsprogramm auf die gewünschte Form bringen (PNG-Datei mit transparenten Bereichen).
    • Mit CSS3 die Form des Bildes beeinflussen (Beispiele: https://css-tricks.com/working-with-shapes-in-web-design/)
    • PNG-Datei mit Hintergrundfarbe und transparentem Bereich als Maske für das darungter liegende Bild einfügen (zusätzlicher Layer)

    Die Navigation kannst du über Design > Customizer > Layout > Menus auf Standard Position setzen. Mit der CSS-Regel .menu-primary { margin-top: -100px; margin-bottom: 100px; } setzt du die Navigation über das Bild und rückst den Text dann wieder nach unten.

    Thread-Starter Magic-Komplex

    (@magic-komplex)

    vor 7 Jahren, 5 Monaten

    Also irgendwas mache ich falsch mit dem CSS, denn was ich auch einfüge, irgendwie hat das Null Auswirkung. Dafür habe ich dank des Vorschlags trotzdem eine akzeptable Lösung gefunden, denn es hat gereicht das Header Bild von der Form anzupassen und als PNG mit transparentem Bereich hochzuladen, dann habe ich den Hintergrund vom Header Bereich farblich angepasst und schon sieht es gut aus.
    Das Menu habe ich oben angepinnt (fixed position über dem Bild), denn mit der CSS Regel rutschte es zwar nach oben, wurde aber auch doppelt so hoch und verdeckte das halbe Bild. Habe ewig mit den Werten rumgespielt, aber irgendwie hab ich das nicht hingekriegt. Schätze mit CSS muss ich noch ne Weile üben, aber es sieht jetzt zufriedenstellend aus. Vielen Dank! 🙂

Ansicht von 2 Antworten – 1 bis 2 (von insgesamt 2)
  • Das Thema „Form des Headerbildes ändern und Menu auf den Header legen“ ist für neue Antworten geschlossen.