FROM CACHE - de_header
Gelöst

Brooklyn Header Backround

heldderberge
Besucher
2 0 0

Servus Leute,

 

ich nutze das Brooklyn Theme und habe einen fixierten Header (scrollt mit runter). Ich benötige ein Hintergrund für meinen Header oder er muss beim runterscrollen automatisch die Schriftfarbe an einen veränderten Hintergrund anpassen. Ich finde leider kein passenden Code zum einfügen, damit ich einen Hintergrund hinzufügen kann. Hat jemand ein passenden Code für mich? 

 

Liebe Grüße

1 AKZEPTIERTE LÖSUNG

Kai
Shopify Staff
2202 525 344

Erfolg.

Hi heldderberge,

 

Kai hier von Shopify.

 

Gerne helfe ich Ihnen bei der Bearbeitung des Headers in Ihrem Brooklyn-Theme.

 

Für diese Anpassung müssen Sie eine kleine Änderung an einer Stelle des Codes vornehmen. Falls Sie dies nicht selbst tun möchten, können Sie sich an einen Shopify-Experten wenden, der dies gerne für Sie vornehmen wird.

 

Wenn Sie sich entscheiden, es selbst zu tun, gehen Sie in Ihrem Admin auf Online Store > Themes. Unter Live Theme sehen Sie eine Schaltfläche mit der Aufschrift Aktionen. Klicken Sie darauf und dann auf Code bearbeiten.

 

19-12-i4362-h6k4a

 

Wenn Sie sich im Codeeditor befinden, sehen Sie links einen Abschnitt mit verschiedenen Kategorien.

Klicken Sie auf Assets > Theme.scss.liquid. Damit gelangen Sie zur CSS-Datei des Themes, in die Sie diesen Code unten auf der Seite einfügen können:

 

.header-wrapper {
  position: fixed;
  z-index: 1;
  background-color: rgba({{ settings.color_body_bg }}, 0.0);
  width: 100%;
}
.header-sticky .header-wrapper {
  background-color: rgba({{ settings.color_body_bg }}, 1);
  @include at-query($min, $medium) {
  .logo img{
    height: 60px;
   }
  }
  .site-nav {
      transition: all .3s ease, height .8s ease;
   -webkit-transition: all .3s ease, height .8s ease;
    -o-transition: all .3s ease, height .8s ease;
    margin-top:0 !important;
  }
}
.header-sticky .header-wrapper {
}

 

Nachdem Sie den Code eingefügt haben, stellen Sie sicher, dass Sie oben rechts auf Speichern klicken.

 

Sobald der Code gespeichert ist, sollte die Kopfzeile und das Logo fixiert sein, sobald Sie beginnen, auf der Seite nach unten zu scrollen.

 

Ich hoffe, dies hat Ihnen geholfen. Wenn Sie weitere Fragen haben, zögern Sie bitte nicht, erneut Kontakt aufzunehmen.

 

MfG

 

 

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

Lösung in ursprünglichem Beitrag anzeigen

6 ANTWORTEN 6

Kai
Shopify Staff
2202 525 344

Erfolg.

Hi heldderberge,

 

Kai hier von Shopify.

 

Gerne helfe ich Ihnen bei der Bearbeitung des Headers in Ihrem Brooklyn-Theme.

 

Für diese Anpassung müssen Sie eine kleine Änderung an einer Stelle des Codes vornehmen. Falls Sie dies nicht selbst tun möchten, können Sie sich an einen Shopify-Experten wenden, der dies gerne für Sie vornehmen wird.

 

Wenn Sie sich entscheiden, es selbst zu tun, gehen Sie in Ihrem Admin auf Online Store > Themes. Unter Live Theme sehen Sie eine Schaltfläche mit der Aufschrift Aktionen. Klicken Sie darauf und dann auf Code bearbeiten.

 

19-12-i4362-h6k4a

 

Wenn Sie sich im Codeeditor befinden, sehen Sie links einen Abschnitt mit verschiedenen Kategorien.

Klicken Sie auf Assets > Theme.scss.liquid. Damit gelangen Sie zur CSS-Datei des Themes, in die Sie diesen Code unten auf der Seite einfügen können:

 

.header-wrapper {
  position: fixed;
  z-index: 1;
  background-color: rgba({{ settings.color_body_bg }}, 0.0);
  width: 100%;
}
.header-sticky .header-wrapper {
  background-color: rgba({{ settings.color_body_bg }}, 1);
  @include at-query($min, $medium) {
  .logo img{
    height: 60px;
   }
  }
  .site-nav {
      transition: all .3s ease, height .8s ease;
   -webkit-transition: all .3s ease, height .8s ease;
    -o-transition: all .3s ease, height .8s ease;
    margin-top:0 !important;
  }
}
.header-sticky .header-wrapper {
}

 

Nachdem Sie den Code eingefügt haben, stellen Sie sicher, dass Sie oben rechts auf Speichern klicken.

 

Sobald der Code gespeichert ist, sollte die Kopfzeile und das Logo fixiert sein, sobald Sie beginnen, auf der Seite nach unten zu scrollen.

 

Ich hoffe, dies hat Ihnen geholfen. Wenn Sie weitere Fragen haben, zögern Sie bitte nicht, erneut Kontakt aufzunehmen.

 

MfG

 

 

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

heldderberge
Besucher
2 0 0

Servus Kai,

 

erstmal vielen Dank für deine Antwort. Ich habe bereits ein fixierten Header, der sich mit nach unten bewegt. Allerdings ist die Farbe des Textes in meinem Header weis, der Hintergrund meiner Seite ist unter der Slideshow ebenfalls weis, sodass man mein Text im Header nicht mehr sieht. Daher ging es mir darum einen Hintergrund mit einer anderen Farbe meinem Header hinzu zufügen, bzw. dass der Header seine Textfarbe automatisch ändert. 

Benny97
Neues Mitglied
7 0 0

Hat sich hier soweit etwas ergeben? Bin gerade am gleichen Problem und würde mich über Hilfe freuen.

Viele Grüße

Benny

blackleaf
Besucher
1 0 0

Welchen Code habt ihr benutzt um die Menüleiste zu fixieren?

Burhan
Besucher
2 0 0
Habe das gleiche Problem, hat sich irgendwas ergeben? Bitte um Hilfe
Burhan
Besucher
2 0 0
Meiner ist auch fixiert aber wenn ich nach unten scrolle will ich eine hintergrundfarbe, wie geht das???????