Header in Dawn 10

[AnnaBe]

Hallo liebe Community,

ich nutze Dawn 10 und habe auf der Homepage einen transparenten Header, der beim Scrollen weiß wird, während die Menu- und Iconfarbe von weiß zu schwarz wechselt. (zendogg.de)

Der Header ist nur auf der Homepage transparent, auf allen anderen Seiten weiß.

Nur sind jetzt leider auch die Schrift und die Icons auf allen anderen Seiten erstmal weiß, weshalb man sie erst sieht, wenn man scrollt.

Hat jemand eine Idee für mich, wie ich das umsetzen kann, dass die Schrift nur auf der Homepage weiß ist und nicht auf allen Seiten? 

Herzlichen Dank und liebe Grüße! 

[AnnaBe · Accepted solution]

Ich beantworte mal meine Frage, habe es mit

<style>
{% if template contains 'index' %}
.list-menu__item {
color: white;
}
.header__active-menu-item {
color: white;
}
.header__icon {
color: white;
}
{%endif%}
</style>
hinbekommen

[Kai]

Danke @AnnaBe, es ist schön mitzubekommen, wie du zum Shopify Profi wirst!

[AnnaBe]

Danke lieber @Kai , davon bin ich leider weit entfernt 🙂 aber dank eurer Hilfe habe ich bissl was gelernt. Liebe Grüße!

[72names]

Hi! Ich sitze seit Tagen an dem Thema, den header transparrent zu haben und icon weiß. Beim scrollen soll dann der header schwarz werden. Ich habe alle möglichen Lösungen ausprobiert und es nicht hinbekommen. Kannst du mir helfen und vielleicht den code posten und wo du ihn eingefügt hast? 

Vielen Dank im Voraus!

[AnnaBe]

Hi @72names , du kannst meinen Header gerne ansehen unter zendogg.de, ob du es dir auch so vorstellst.

Hast du den Header schon transparent?

Wenn ja, dann kannst du ans Ende der base.css folgenden Code hinzufügen:

.section-header.shopify-section-group-header-group.scrolled-past-header sticky-header.header-wrapper {
background: rgba(255, 255, 255, 1);
}
.section-header.shopify-section-group-header-group.scrolled-past-header sticky-header.header-wrapper .list-menu__item {
color: black;
}
.section-header.shopify-section-group-header-group.scrolled-past-header sticky-header.header-wrapper .header__icon {
color: black;
}
.section-header.shopify-section-group-header-group.scrolled-past-header sticky-header.header-wrapper .header__active-menu-item {
color: black;
}

Und im Theme Liquid vor dem schließenden </body> folgendes:

<style>

{% if template contains 'index' %}
.list-menu__item {
color: white;
}
.header__active-menu-item {
color: white;
}
.header__icon {
color: white;
}
{% else %}
.list-menu__item {
color: black;
}
.header__active-menu-item {
color: black;
}
.header__icon {
color: black;
}
{%endif%}

</style>

So hat es bei mir funktioniert, ich hoffe, das hilft dir, LG

[AnnaBe]

Kleiner Nachtrag, falls dein Header noch nicht transparent ist: Ich habe ihn im Theme Editor über das Farbschema transparent gemacht und dann das Hero Video mittels negativer Margin nach oben geschoben (Ende der base.css). Du müsstest nur deine Section ID einfügen:

.section-template--19126621405513__c3752759-b996-4a31-a37a-d5e5f113df87-padding > video {
margin: -165px 0 0 0;
}
@media screen and (max-width: 749px) {
.section-template--19126621405513__c3752759-b996-4a31-a37a-d5e5f113df87-padding > video {
margin: -135px 0 0 0;
}
}

input.search__input.field__input, .predictive-search__item, .predictive-search__results-groups-wrapper {
background-color: white !important;
}

So, das war alles an Code, meld dich gerne, wenn du irgendwo Probleme hast, LG

[72names]

WOW! Danke für die wertvollen Tipps!
Wie kann ich das Farbschema transparrent einstellen? Ich benutze das Dawn Theme. Wo finde ich meine Section ID? 
Danke für deine Hilfe!

[AnnaBe]

Gerne 🙂 ich hoffe, sie helfen dir auch!

Du kannst im Theme Editor unter --> Farben die Farbschemata ändern und der Hintergrund wird transparent, wenn du ganz einfach die Farbe leer lässt (siehe unten). Dieses Schema wählst du dann für deinen Header aus.

Die Section ID findest du in der Konsole, wenn du auf deiner Webseite im Browser mit der rechten Maus klickst und auf --> Untersuchen gehst, dann dein Foto oder Video anklickst und die entsprechende ID ausliest. Wenn du damit Probleme hast, lass wissen, das könnte ich vllt für dich machen.

LG

[Gabe]

Hey @72names 

Vielleicht findest du diesen Leitfaden auch hilfreich bzgl. Transparenten HG! Es ist zu empfehlen jeglichen CSS über den CSS Editor einzubauen so dass dein Theme nicht die Theme Updates verliert.

VG,

[Thomas_7]

Hallo Gabe,

ist schon ein bisschen her, finde die Diskussion aber generell sehr spannend. Was meinst du denn mit dem Satz?
"s ist zu empfehlen jeglichen CSS über den CSS Editor einzubauen so dass dein Theme nicht die Theme Updates verliert."
Wie bekomme ich das hin?

Würde gerne meinen Header transparent machen und beim Scrollen (Ankündigungsleiste ebenso) dann schwarz machen.
Das Icon soll dann weiß bleiben.
Was muss ich denn hierfür in welcher Reihenfolge  tun? Bzw. welchen Code brauche ich?

Ich danke euch!

MfG
Thomas

[Gabe]

Hey Thomas! @Thomas_7 

Wenn die Theme Editor Farb- und Opazitäts-Einstellungen nicht für deinen Zweck ausreichen dann ist der neue CSS Editor dafür gedacht und super leicht zum Bedienen. Hast du diesen schon ausprobiert? 

Ich sehe auch in deinen anderen Threads dass du im grossen und ganzen das erreicht hast was du erzielen wolltest, ist das richtig?

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.