Logo vergrößern

Thema wurde von Rolf Maurer, 14. Dezember 2020 erstellt.

  1. Rolf Maurer

    Rolf Maurer Erfahrener Benutzer

    Registriert seit:
    28. Februar 2014
    Beiträge:
    133
    Danke erhalten:
    6
    Danke vergeben:
    10
    Ich bin gerade an einem neun Shop. Da habe ich beim Malibu theme das Problem, dass wenn ich das Logo vergößere, dass dann die Navigationsleiste stark nach unten rutscht und ich diese nicht mehr unter den Header bekomme.
    https://www.weinshop-holzapfel.de/
    Kann das sein, dass dies seit der Version 4.2 so ist? Ich meine früher war das einfacher.

    Ich habe das Logo vergrößert und per eigenem CSS mit -70px an den oberen Rand gerückt, damit mir die Kopfzeile nicht zu groß wird. Jetzt ist aber die Navigationsleiste weit nach unten gerutscht und ich bekomme diese nicht mehr unter den header, wo ich Sie gerne hätte.

    Ich kann ja aber das Logo nicht so klein lassen. Wie bekomme ich denn im Malibu theme das Logo größer, ohne dass die Navigation im Bild hängt?
     

    Anhänge:

  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Nein, das war schon immer so, dass man den ganzen Header anpassen muss, damit es richtig passt.
    Das blaue auf dem Bild ist Dein Logo-Bereich und der Grund, warum das nach unten drückt:

    mit 1069 x 1453px ist Dein Logo aber auch riesig - das ist Ladezeitberschwendung - egal wie gut es komprimiert ist.
    Zumal es nur mit 81 x 110px angezeigt wird.

    Auch wenn der Editor jetzt anders ist, die Anleitung aus dem Honeygrid-Template ist im Grunde so geblieben:
    (Link nur für registrierte Nutzer sichtbar.)

    Dein Problem scheint zu sein, dass Du den Logo-Bereich auf 150px erhöht hast, das Bild aber um 100px nach oben verschiebst.
    Die Höhe des Headers bleibt dabei aber bei 150px
    Du müsstest also eher den ganzen Logo-Bereich um 50px nach oben Schieben und den gesamten Header dann etwas höher machen, bis es passt.
     
  3. Rolf Maurer

    Rolf Maurer Erfahrener Benutzer

    Registriert seit:
    28. Februar 2014
    Beiträge:
    133
    Danke erhalten:
    6
    Danke vergeben:
    10
    Ja, das ist genau was mich stört. Es gibt also keine Möglichkeit mit Bordmitteln den Header wieder klein zu machen? Er ist ja auch nur teilweise mit der Hintergrundfarbe gefüllt, was mich auch irritiert hat.
    Ich habe gerade mal nachgesehen: im SE habe ich eine Größe von 124px für den header eingetragen. Das scheint dann aber von der Logo-Größe überlagert zu werden.

    Was die Größe des Logos angeht: da hast du natürlich vollkommen recht. Ich hatte das vom Kunden bekommen und noch nicht angepasst.
     
  4. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Der Header ist nur 124px (Top-Navi und der gelbe Bereich), das Logo hat aber 150px - das fängt erst unter der Top-Navi an, hat einen transparenten Hintergrund und ragt weiter nach unten.

    Du müsstest entweder den Header höher machen, oder den ganzen Logobereich und nciht nur das Bild nach oben versetzen.

    #header .navbar-header .navbar-brand {
    margin-top: -50px;
    }

    könnte vielleicht gehen.
     
  5. Rolf Maurer

    Rolf Maurer Erfahrener Benutzer

    Registriert seit:
    28. Februar 2014
    Beiträge:
    133
    Danke erhalten:
    6
    Danke vergeben:
    10
    Danke, Barbara. In diese Richtung werde ich es mal probieren.

    Nur hat es mich gewundert, dass so wenig darüber im Forum zu lesen ist. Das müsste doch eigentlich ein Problem sein, das häufig auftritt. wie löst ihr das dann mit den Logos? Bin gerne bereit einen besseren Weg zu gehen...
     
  6. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Wenn die Logo-Höhe 150is, muss der "Header inside" auch 150 px hoch sein (Suche und Warenkorb müssen angepasst werden) und der Header gesamt 150px + der Höhe der Top-Navi.
    Bei Dir ist die Top-Navi 40px, Logo 150 = Header-Höhe 190px.
    Versetzt Du das Logo mit margin-top: -xxx kann der Header entsprechend kleiner werden.