Rome - Navigation/Logo unterhalb Headerbild setzen

Antworten
#1
06.12.2017 11:42 (zuletzt bearbeitet: 09.12.2017 19:12)
avatar  uwb
#1
avatar
uwb

Hallo
ich verwende bei einer Seite, die noch im Aufbaustadium ist, "Rome" und möchte gerne die Navigation unterhalb des Headerbildes setzen.
Und gerne würde ich das Headerbild (Backgrpound-image) etwa 250px weniger hoch machen.
Und das Sahnehäubchen wär - muss aber nicht unbedingt sein - wenn beim hoch scrollen die Navigation/logo dann oben kleben würde, und das Headerbild aus dem Bildschirm oben raus fährt (in Wordpress wärs Sticky-menu).

Mit dem chrome-Inspector habe ich bereits folgendes gefunden:
- header (.jptl-header) hat position:fixed, was macht, dass logo/navi nicht scrollen. Das könnte man ja auf relative setzen, wenn es nicht fix sein soll
- Das Headerbild ist im div (.jptl-hrade__image) als Background-image versorgt. In der unveränderten Design-Variante wird es vom header (logo und navigation) überdeckt, fängt aber eigentlich schon ganz oben an.

Ich habe im Inspector schon einiges versucht mit Veränderungen, die ich dann im "head" als css-Anweisungen eingeben könnte, aber ich komm einfach nicht auf eine Lösung. Aber ich glaube an Euch Experten.

Vielleicht kommen nun Stimmen auf, warum das machen?, oder das macht keinen Sinn. Eben grad das möchte ich rausfinden, auch indem ich dann Freunde von mir um ihre Meinung dazu bitte.

Falls relevant: https://dohue.jimdo.com - aber aufgepasst, vielleicht werkle ich grad ein wenig dran.

Herzlichen Dank schon für Eure Inputs

uwb


 Antworten

 Beitrag melden
#2
06.12.2017 12:21
avatar  make
#2
ma
make

Hallo,

ich weiß nicht wie sehr du an dem Design "Rome" hängst. Wenn ich es richtig verstanden habe, dann würde das Design "Stockholm" genau Deinem Wunsch entsprechen.

https://stockholm-test.jimdo.com/

Gruß
make

www.vertraute-erde.de

 Antworten

 Beitrag melden
#3
06.12.2017 13:18 (zuletzt bearbeitet: 06.12.2017 13:22)
avatar  TiJo
#3
Ti
TiJo

versuch mal:

1
2
3
4
5
6
7
 
.jtpl-header {
    position: sticky;
    z-index: 10;
    top: 0;
    width: 100%;
    margin-top: 391px;
}
 



1
2
3
4
 
jtpl-header--image {
    height: 491px;
    margin-top: -510px;
}
 



Inwieweit sich das responsive verhält, kann ich dir nicht sagen. Schaut aber wohl so aus wie du willst.
An deiner Stelle würde ich aber auch eher die Variante von @make nehmen


 Antworten

 Beitrag melden
#4
06.12.2017 14:01
avatar  uwb
#4
avatar
uwb

Hi Make
herzlichen Dank.
Das ist sicher ein Option, wenn die Antwort von TiJo nicht zum Ziel führt.
Gruss
uwb


 Antworten

 Beitrag melden
#5
06.12.2017 14:01
avatar  uwb
#5
avatar
uwb

Hi TiJo

PERFEKT!!!
herzlichen Dank!!

LG uwb


 Antworten

 Beitrag melden
#6
07.12.2017 09:11
avatar  uwb
#6
avatar
uwb

Hi Make
gerne ergänze ich zu Deiner für mich sehr hilfreichen Antwort Folgendes:

1
 
position: sticky;
 


wird nicht von allen Browsern unterstützt, so dass ich noch die Zeile

1
 
position: -webkit-sticky;
 


eingefügt habe.
Aber nun ist es wirklich perfekt.
LG uwb


 Antworten

 Beitrag melden
#7
07.12.2017 10:55
avatar  make
#7
ma
make

Hi uwb,

ich will mich natürlich nicht mit fremden Federn schmücken.

Der Dank für den Code gehört natürlich TiJo.

Gruß
make

www.vertraute-erde.de

 Antworten

 Beitrag melden
#8
07.12.2017 11:04
avatar  uwb
#8
avatar
uwb

uups, sorry TiJo

lg uwb


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!