Frage zu Helix Ultimate Template

olch_de · 6. August 2019

Hallo zusammen, ich bin neu hier.

Habe einen unschönen Effekt bei einer Seite die ich mit dem Helix Ultimate Template (Version 1.1.1) erstellt habe. Wenn ich die Seite nach oben schiebe scrollt die Kontaktleiste sauber raus, wenn es dann an die Titelleiste geht scrollt diese nicht sondern springt nach oben. Problem tritt bei allen von mir getesteten Browsern (Mozilla, Edge, Safari) auf und auch auf allen Geräten Notebook, iPhone und iPad.

Wie kann ich das ändern bin für jeden Hinweis dankbar

Habe nur den eingeblendeten Menü-Pfad (breadcrumb) entfernt und die Ränder oben und unten verkleinert. Habe die Änderungen zum Test auch wieder rückgängig gemacht springt trotzdem

Bei einer Seite die ich noch mit dem Helix3 Template erstellt habe scrollt auch die Titelleiste sauber raus.

Es geht um folgende Seite: https://www.e-mobil-center.de

mfg Oliver

kitepascal · 6. August 2019

Hi Oliver,

mit diesem CSS (in die custom.css einfügen) springt nichts mehr:

#sp-header {

position: absolute;

top: 31px;

}

#sp-header.header-sticky {

top: 0px;

}

Gruß

Pascal

olch_de · 7. August 2019

Hi Pascal,

danke für deine Antwort.

Du hast recht damit springt nichts mehr. Aber leider fangen so die Seiten nicht mehr bündig unter dem Header an sondern rutschen hinter dem Header nach oben!

Habe dann versucht im Layout Builder beim Titel über Style einen oberen Rand zu definieren. Das Problem dabei ist aber das der Rand für die Modi Desktop, Tablet und Handy unterschiedlich groß sein müsste

Hast du dafür vielleicht auch noch eine Lösung?

Gruß Oliver

kitepascal · 7. August 2019

Hi Oliver,

damit die Seite bündig anfängt, kannst du dem #sp-main-body noch ein padding-top geben.

Mit media queries kannst du dir das zurechtwurschteln, dass es auf allen Geräten passt.

Das vollständige CSS (erfordert ggf. noch etwas Finetuning):

Code

#sp-header.header-sticky {
    top: 0px;
}

#sp-header {
    position: absolute;
    top: 31px;
}

.com-sppagebuilder #sp-main-body {
    padding-top:100px;
}

@media (max-width:991px) {

    #sp-header {
        top:53px;
    }

    .com-sppagebuilder #sp-main-body {
        padding-top:103px;
    }

}

@media (max-width:467px) {

    #sp-header {
        top:74px;
    }

}

Alles anzeigen

olch_de · 8. August 2019

Hallo Pascal,

zuerst einmal möchte ich mich bei dir bedanken für deine Zeit die du hier aufbringst!

Das mit dem Finetuning wäre sicher kein Thema. Leider tauchen mit dem CSS Code zwei neue Probleme auf:

1. Die Titelleiste wird nicht mehr angezeigt.

2. Das mit dem Rand greift nur bei Seiten die vom Pagebuilder kommen! Also nicht bei der Gallerie und dem Kontaktformular.

Wobei es mir eh lieber wäre ich könnte die Gallerie und das Kontaktformular in eine Pagebuilder Seite einbinden. Ich habe nur leider noch keinen Weg gefunden wie ... aller Anfang ist schwer ...

Vielleicht sollte ich noch mal im www etwas suchen ob irgendjemand das Problem schon mal im original Code gefunden und behoben hat! Bevor das hier zu aufwändig wird ...

Lieben Gruß Oliver

kitepascal · 8. August 2019

Zitat von olch_de

1. Die Titelleiste wird nicht mehr angezeigt.

Welche Titelleiste?

Bei mir passt auf sämtlichen Seiten alles mit dem CSS.

Oder meinst du das Titelbild + Titel auf mobilen Geräten?

Das hast du im PageBuilder so konfiguriert, dass es nur am Desktop angezeigt wird.

Wo fügst du das CSS ein? Im PageBuilder, sprich nur für eine Seite evtl.?

Wenn du es in den Template Optionen einfügst (oder in eine css/custom.css im Template Verzeichnis, was ich empfehlen würde), gilt es für alle Seiten, auch für die Galerie.

https://enginetemplates.com/cu…helix-ultimate-framework/

olch_de · 8. August 2019

Hallo Pascal, mit Titelleiste meine ich den Page Title dieser ist für alle Seiten aktiviert außer der Startseite siehe Screenshots ...

Den CSS Code habe ich zum testen hier eingefügt ...

würde ihn aber in die custom.css schreiben wenn er funktioniert.

anka · 9. August 2019

Versuche es mal damit:

Code

header.header-sticky + #sp-section-1 {
margin-top: 100px;
}

Evtl. musst du mit Media Queries arbeiten, damit es immer passt, weil die schwarze "top-bar" bei einem schmalen Browserfenster zwei- bzw. dreizeilig wird.

kitepascal · 9. August 2019

Dann nochmal:

Code

#sp-header.header-sticky {
    top: 0px;
}
#sp-header {
    position: absolute;
    top: 31px;
}
#sp-section-1 {
    padding-top:100px;
}
@media (max-width:991px) {
    #sp-header {
        top:53px;
    }
    #sp-section-1 {
        padding-top:103px;
    }
}
@media (max-width:467px) {
    #sp-header {
        top:74px;
    }
}

Alles anzeigen

kitepascal · 9. August 2019

Code

    #sp-section-1 {
        padding-top:103px;
    }

aus Zeile 15-17 kannst du noch streichen - das ist überflüssig.

olch_de · 10. August 2019

Zitat von anka
Versuche es mal damit:
Code
header.header-sticky + #sp-section-1 {
margin-top: 100px;
}
Evtl. musst du mit Media Queries arbeiten, damit es immer passt, weil die schwarze "top-bar" bei einem schmalen Browserfenster zwei- bzw. dreizeilig wird.

Hallo Anka,

vielen lieben Dank. Habe gerade den Code von dir getestet, funktioniert jetzt auf allen Geräten! Keine weiteren Anpassungen notwendig ...

Grüße Oliver

olch_de · 10. August 2019

Hallo Pascal,

dir auch noch vielen Dank das du dich meines Problems angenommen hast

Gruß Oliver