Problem mit Widescreen Ansicht auf Smartphone / Sticky Header & Logo fehlt (Helix 3 Standard)

  • Hallo an alle im Joomla Forum.


    Es wäre super wenn mir jemand weiterhelfen kann.

    Ich war gerade mit einem Galaxy S9+ auf der mobilen Seite von www.computercheck.cc und es fehlt das Logo und der Sticky Header ist ganz durcheinander. Ich weis leider gar nicht woran das liegt / habe fast keine Programmierkenntnisse was das angeht.


    Auf einem P20lite welches weniger Pixel in der Breite hat wird der Header und Logo zwar angezeigt, jedoch wenn man von Hochformat auf Querformat wechselt, dann füllt der Header nicht die ganze Breite aus.

    Das macht der Header erst, wenn man die Seite im Querformat neu lädt. Dann ist alles richtig bis auf den Button für das Menü der nicht rechts ist sondern links beim Logo..


    Aber auf dem S9+ zum Beispiel fehlt Logo und alles durcheinander wie gesagt.


    Wenn mir hier jemand helfen kann danke vielmals. Wäre schön wenn man das im Helix 3 Theme einfach mit einem kurzen custom-CSS Code zb. geradebiegen könnte.


    Im Endeffekt will ich einfach einen Sticky Header der sich dynamisch anpasst und wo nichts verschwindet...


    Screenshots sind im Anhang dabei.


    Lg!! :)

  • Dann ist alles richtig bis auf den Button für das Menü der nicht rechts ist sondern links beim Logo..

    Im Quellcode sieht es bei dir momentan folgendermassen aus:

    Code
    1. <div id="sp-logo" class="col-xs-8 col-sm-8 col-md-3">...</div>
    2. <div id="sp-menu" class="col-xs-4 col-sm-9 col-md-9" style="position: static;">...</div>

    Die Summe der Zahlen bei col-sm-x darf nicht grösser als 12 sein.


    Wahrscheinlich hast du unter Layout > Menu > Colmn Settings > Tablet Layout "col-sm-9" ausgewählt. Ändere das zu "col-sm-4" oder lösche es ganz. Und dieses style="position: static;" solltest du auch wieder löschen.


    Zusätzlich solltest du noch eine Datei custom.css mit folgenden Eintrag erstellen

    Code
    1. #sp-header .logo {
    2. max-width: 100%;
    3. }

    und im Verzeichnis /templates/shaper_helix3/css/ abspeichern.

  • Nachtrag:

    Sehe gerade, das macht das Template wohl automatisch. In dem Fall musst daran du nichts ändern.


    Hallo Anka. Danke für die Tipps mit den Layout Einstellungen, das hat schon geholfen und sieht jetzt so aus wie es soll.

    Hatte auch vergessen als Retina-Logo das Logo zu hinterlegen deshalb hatte er im "Tablet-Modus" gar kein Logo angezeigt^^

    Nur der Header passt sich vom Hoch- in Querformatwechsel noch nicht automatisch an.


    Max-Width: 100% für sp-header habe ich probiert, jedoch ist das Logo dann zu groß und es löst auch generell das Problem nicht das der Header nicht automatisch die Breite dynamisch zu 100% wechselt..

    (alten SP-Header.logo Code mit fester Pixelgröße habe ich natürlich entfernt vorher)


    Nur nach einem Reload der Page passt es.


    Aktuell hab ich folgenden Custom-CSS Code drin:


    .sp-megamenu-parent > li > a {font-size:15px; font-weight:600}


    #sp-header .logo {

    width: 230px;

    margin: 0px 0px 0px 0px;}


    #sp-header {

    height: 90px;}


    hr {

    border: 0.5px solid#C6C6C6;

    }



    ps. Screenshots im Anhang dabei.

    Vielleicht kannst du mir noch helfen den Header hinzubekommen wie es sein sollte dann wäre super !! :) Danke schonmal für die Hilfe bis jetzt.

  • Max-Width: 100% für sp-header habe ich probiert, jedoch ist das Logo dann zu groß und es löst auch generell das Problem nicht das der Header nicht automatisch die Breite dynamisch zu 100% wechselt..

    (alten SP-Header.logo Code mit fester Pixelgröße habe ich natürlich entfernt vorher)

    Du hättest den alten Code nicht löschen sollen ;). Versuche es einfach damit:

    Code
    1. #sp-header .logo {
    2. width: 230px;
    3. max-width: 100%;
    4. margin: 0px 0px 0px 0px;
    5. }

    Aber du hast insofern recht, dass das nicht hilft bei der dynamischen Anpassung des Headers. Wenn du aber die Breite des Logos nicht auf 100% einschränkst, dann passt es beim Handy nicht in die für das Logo reservierte Spalte (col-xs-7 enspricht bei einem Handy etwa 160px).


    Vielleicht kannst du mir noch helfen den Header hinzubekommen wie es sein sollte dann wäre super !! :) Danke schonmal für die Hilfe bis jetzt.

    Da muss ich leider passen. Ich sehe zwar im Quellcode, wie es zustande kommt, weiss aber nicht, warum es sich so verhält. Das kann man auch am PC reproduzieren, wenn man das Browserfenster verkleinert, bevor man die Seite aufruft.


    Dann steht im Quellcode so etwas:


    <header id="sp-header" class="animated menu-fixed-out" style="max-width: 320px; left: auto;">


    Der Wert für max-width hängt von der anfänglichen Breite des Browserfensters ab und verändert sich auch nicht, wenn man das Browserfenster nachträglich mit der Maus verbreitert.


    Ich habe es mal mit einer "jungfräulichen" Installation vom Helix3 verglichen. Dort sieht der Quellcode so aus:


    <header id="sp-header" class="animated menu-fixed-out">


    Der Teil mit dem style="max-width: 320px; left: auto;" nicht fehlt.


    Wie gesagt, hier bin ich mit meinem Latein leider am Ende, aber vielleicht kommt noch jemand auf die Lösung.