Probleme mit der Darstellung im Header

[OldDaddy]

Hallo Schwarmwissen,

ich habe verrenne mich gerade mit der Darstellung des Headers. Wir haben die Menüführung in unserem Shop geändert und nun möchten wir den Header insofern anpassen, dass Logo, Suchfeld (etwas kleiner gezogen) und Kategorien auf einer Höhe sind.

Die Bilder zeigen den ist Zustand (Header Webite) und wie es gewünscht ist (Header Website 2).

Außerdem habe ich aktuell ein Problem in der Mobilen Darstellung, da auf der Startseite das Menu-Icon und das Logo quasi aufeinander liegen (Bild Header Mobile)...auf den Kategorieseiten passt das (Bild Header Mobile 2).

Leider verrenne ich mich gerade völlig in den Einstellungen. Vielleich kann mir jemand sagen, was ich in der Custom CSS angeben muss, damit das passt.

Die Webseite ist https://re-elko.com

Ich danke Euch schonmal im Voraus.

Edited November 21, 2022 by OldDaddy (see edit history)

[rictools]

Die "Untersuchen"-Funktion, die in den meisten Browsern per Rechtsklick erreichbar ist, kennst du? Da kannst du die verschiedenen CSS-Anweisungen ausprobieren.

Hast du bisher nur Änderungen in der custom.css vorgenommen oder auch in originalen CSS-Dateien? Vielleicht hilft es, zunächst auf den Ursprungszustand zurückzugehen z. B. indem du die custom.css zunächst leerst.

[rictools]

Ich habe mir gerade einmal die Logo-Verschiebung in der mobilen Ansicht angeschaut, das kannst du korrigieren, wenn du die folgende Anweisung entfernst oder in der custom.css überschreibst:

@media (max-width: 767px) #header .header-nav .top-logo {padding-top: 11px;}

 

[OldDaddy]

Hallo rictools,

das mit dem "untersuchen" mache ich die ganze Zeit. Habe jetzt alle ehemaligen änderungen entfernt. In der originalen theme css habe ich nichts geändert gehabt. Das Suchfeld habe ich jetzt kleiner und auf einer Höhe mit den Hauptkategorien. Jetzt müsste das ganze nur etwas nach rechts und das DBMenu (Alle Inhalte) auf einer Höhe mit den Hauptkategorien....daran scheitere ich bis jetzt.

Das mit dem Logo hat so nicht funktioniert, ab einer gewissen Bildschirmbreite rückt das Logo in das Menu hinein.

[OldDaddy]

So, Hauptkategorien und Suche habe ich auf eine Höhe gebraucht und nach rechts geschoben mit:

#header .header-top .position-static {
  position: static;
  float: right;
}

Jetzt fehlt nur noch das Menu mit "Alle Inhalte" auf einer Höhe mit den anderen Kategorien zu bringen.

BITTE HILFE

Edited November 21, 2022 by OldDaddy (see edit history)

[rictools]

vor 48 Minuten schrieb OldDaddy:

Jetzt fehlt nur noch das Menu mit "Alle Inhalte" auf einer Höhe mit den anderen Kategorien zu bringen.

Das müßtest du (falls das geht) im BackOffice unter "Positionen" verschieben, ansonsten im der entsprechenden tpl-Datei. Oder du trickst und schiebst es mit einem negativen margin-Wert nach oben.

[rictools]

vor einer Stunde schrieb OldDaddy:

Das mit dem Logo hat so nicht funktioniert, ab einer gewissen Bildschirmbreite rückt das Logo in das Menu hinein.

Bei welcher Breite? Ich kann das Browserfenster bis 500 px Breite verkleinern, ab da kann ich bei keiner Breite eine Überlappung sehen. Teste auch einmal einen anderen Browser, möglicherweise ist da noch etwas im Cache.

[OldDaddy]

Das mit dem Logo hat jetzt funktioniert, allerdings ausschließlich, wenn ich wie du geschrieben hast @media (max-width: 767px) #header .header-nav .top-logo {padding-top: 11px;} in der theme.css auskommentiere, über die custom css funktioniert das irgendwie nicht.

[OldDaddy]

1 hour ago, rictools said:

Oder du trickst und schiebst es mit einem negativen margin-Wert nach oben.

So hat das funktioniert. Vielen Dank dir nochmal.