FROM CACHE - de_header
Gelöst

Header in Dawn 10

AnnaBe
Pfadfinder
117 21 37

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! 

1 AKZEPTIERTE LÖSUNG

AnnaBe
Pfadfinder
117 21 37

Erfolg.

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

Lösung in ursprünglichem Beitrag anzeigen

11 ANTWORTEN 11

AnnaBe
Pfadfinder
117 21 37

Erfolg.

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
Shopify Staff
2327 541 360

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

Kai | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

AnnaBe
Pfadfinder
117 21 37

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

72names
Tourist
4 0 0

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
Pfadfinder
117 21 37

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
Pfadfinder
117 21 37

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
Tourist
4 0 0

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
Pfadfinder
117 21 37

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

 

transparenter Header.PNG

Gabe
Shopify Staff
17365 2751 4057

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,

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Thomas_7
Tourist
15 0 0

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
Shopify Staff
17365 2751 4057

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.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog