Navi Design Rome

27.02.2016 08:32 (zuletzt bearbeitet: 27.02.2016 18:08)
avatar  lukasha
#1
avatar

Hallo zusammen,

ich möchte auf meiner Seite http://www.littledreamers.de/ die Navigationsleiste nach oben verschwinden bzw. wegscrollen lassen, wenn ich nach unten scrolle. Sie soll also nicht haften beim scrollen. So wie das bei anderen Designs auch teilweise zu sehen ist. Rome passt mir ansonsten perfekt - ich möchte nur dieses Detail ändern. Meine Navigationsleiste soll eigentlich transparent sein. Ich habe jedoch vorläufig einen weißen Hintergrund gemacht, weil es sonst völlig bescheuert ausschaut, wenn ich nach unten scrolle und die transparente Leiste über dem Text und den Fotos zu sehen ist.

Könnte mir bitte jemand weiterhelfen?

Besten Dank im Voraus,
Katja


 Antworten

 Beitrag melden
27.02.2016 13:02
avatar  Marie
#2
avatar

Hallo @lukasha

Also meiner Meinung nach solltest Du es so lassen. Ich find das nämlich gut.

Auch wenn ich auf einer Seite nach unten scrolle, möchte ich die Navigation im Blickfeld haben. Denn wenn ich mit einer Seite fertig bin mit lesen, dann brauch ich nicht erst wieder nach oben scrollen um die nächste Rubrik anzuklicken bzw. dass die Navigation ersichtlich ist.

Fertig mit einer Seite, klick auf die nächste Rubrik...find ich persönlich praktischer

Liebe Grüße, Marie


Ironie setzt die Intelligenz beim Empfänger voraus :-)

 Antworten

 Beitrag melden
27.02.2016 18:23 (zuletzt bearbeitet: 27.02.2016 18:33)
avatar  az_
#3
avatar
az_

Hallo @lukasha,

...ich finde Deine Idee prinzipiell nicht schlecht. So etwas kann man mit einer Transition lösen. Auf der Jimdo-Seite haben die etwas ähnliches gemacht, nur umgekehrt. Das ist aber nicht ganz ohne.

Was würdest Du zu einem Schatten sagen, mit Verlauf:



man sieht es kaum beim Header-Bild,
...aber im Textbereich kommt es sehr gut:





...und es ist super einfach zu erreichen,
eine ganz einfache Ergänzug im Head-Bereich reicht:

1
2
3
4
5
6
7
8
 
 <style>
.navigation-colors {
-webkit-box-shadow: 0px 10px 15px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 10px 15px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 10px 15px 0px rgba(50, 50, 50, 0.75);
}
</style>
 
 



LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
28.02.2016 20:49
avatar  lukasha
#4
avatar

@Marie Ja, da bin ich ganz bei dir. Das Problem war nur, dass ich im Header mein Logo darstellen wollte, und dadurch ist dieser so breit geworden. Nun habe ich mich entschlossen, das Logo wegzulassen und den Header dafür schmaler zu machen...daher kann er ruhig eingeblendet bleiben. Mit dem Tipp von az, sieht es eh noch besser aus. @az_ Danke an dieser Stelle für den Schatten. Schaut echt toll aus.

Das Einzige was ich nun noch im Header gerne hinzufügen würde, wäre etwas Text links und/ oder rechts von den Buttons. Ist das möglich?

VG - Katja


 Antworten

 Beitrag melden
04.03.2016 18:27
avatar  Marie
#5
avatar

Hallo @lukasha

Stimmt, sieht nun echt klasse aus!

Liebe Grüße, Marie


Ironie setzt die Intelligenz beim Empfänger voraus :-)

 Antworten

 Beitrag melden
04.03.2016 19:20
avatar  az_
#6
avatar
az_

...Text rechts und links neben der Navigation? Das wird schwierig :)

Also... lieber nicht! Aber wo ist das nette Logo geblieben? War Dir der Streifen über dem Headerbild zu breit bzw. zu hoch? Ich fand den ganz besonders gut!

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
08.03.2016 20:27
avatar  lukasha
#7
avatar

Hallo @az_, danke für die Antwort.
Ja, mit dem Logo war mir der Header viel zu breit. Als ich versuchte das Logo kleiner zu machen, war es jedoch nicht mehr auf einer Linie mit den Buttons, sondern etwas drunter. Gibt es eine Möglichkeit die beiden Elemente unabh. von der Logogröße zu zentrieren?

Liebe Grüße,
Katja

P.S.: dafür habe ich das Logo nun auf den Hintergrundbildern platziert :)


 Antworten

 Beitrag melden
09.03.2016 14:19 (zuletzt bearbeitet: 27.03.2016 01:28)
avatar  az_
#8
avatar
az_

...auf http://miami-designtest.jimdo.com/ hab ich das Logo aus der Navigationsleiste herausgeschnitten:




...wäre das etwas für Dich?

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
09.03.2016 20:15
avatar  lukasha
#9
avatar

Hallo @az_ , oh ja das sieht wirklich toll aus. Ich würde es gerne ausprobieren. Hoffentlich verrätst du mir nun auch, wie das geht :)
LG, Katja


 Antworten

 Beitrag melden
12.03.2016 07:34 (zuletzt bearbeitet: 27.03.2016 01:28)
avatar  az_
#10
avatar
az_

Hallo @lukasha,

...der Trick steht bereits auf der Seite. Scroll mal etwas nach unten:



LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
13.03.2016 00:11
avatar  lukasha
#11
avatar

Hallo @az_ , das funktioniert bei mir leider nicht. Wenn ich den Code in den Einstellungen bei Head bearbeiten reinkopiere, dann ändert sich nichts. Was mache ich falsch?
LG, Katja


 Antworten

 Beitrag melden
13.03.2016 17:37
avatar  az_
#12
avatar
az_

Wichtig ist das auslösende Script. Das musst Du so weit unten wie möglich auf der Seite platzieren:

1
2
3
 
<script> $('.jtpl-logo')
.prependTo('.navigation-colors');
</script>
 

#

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
25.03.2016 09:58
avatar  lukasha
#13
avatar

Lieber @az_ , ich habe es jetzt ein paar Mal probiert. Es funktioniert leider nicht. Ich weiß nicht, was ich falsch mache. Aber habe ich dich richtig verstanden, dass das auslösende Schrift wirklich sichtbar auf der Seite stehen muss? Das würde für mich dann nicht in Frage kommen...


 Antworten

 Beitrag melden
26.03.2016 22:46
avatar  az_
#14
avatar
az_

...es muss als html-Widget im Content der Seite platziert werden. keiner sieht es.
LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

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