Zweiten Header für weitere Menüpunkte

[DavideVi]

Sehr geehrte Damen und Herren,

ich nutze derzeit das "Broadcast"-Theme und habe den Wunsch, unterhalb des bestehenden Headers einen zusätzlichen Header einzufügen. Die Struktur, die ich gerne erreichen möchte, ist wie folgt:

1. Announcementbar
2. Erster Header (enthält Menüpunkte, Logo und Account/Warenkorb-Button)
3. Zweiter Header (enthält weitere Menüpunkte)

Ich wäre äußerst dankbar für Ihre Unterstützung und freue mich auf Ihre Antwort.

Vielen Dank und herzliche Grüße!

[Gabe · Accepted solution]

Hey @DavideVi 

Ein tolles Theme, gute Wahl! Und danke für die Angaben aber hier wird es einen Shopify Experten oder Agentur verlangen denn das wird komplexe Code Änderungen verlangen. Haben dir die Theme Entwickler oder die Doku nicht helfen können? Da du viel Geld für das Theme bezahlt hast, geben die oft ganz tolle Tipps ab oder können mit kleinen Anpassungen helfen. 

Ich habe jetzt die Design Foren gescannt und keine einfache Lösungen finden können, leider. Um einen zusätzlichen Header unterhalb des bestehenden Headers einzufügen erfordert fortgeschrittene Kenntnisse in HTML, CSS, und Liquid.

Du kannst z. B. im header.liquid unter dem Abschnitt "Abschnitte" einen Code wie den folgenden unterhalb des existierenden Header-Codes einbauen:

<div class="custom-header">
  <div class="container">
    <nav class="custom-nav">
      <!-- Hier können weitere Menüpunkte hinzugefügt werden -->
      <a href="/link1">Link 1</a>
      <a href="/link2">Link 2</a>
      <!-- ... -->
    </nav>
  </div>
</div>

Dann den 2. Banner stylen per einer Bearbeitung der CSS-Dateien des Themes. Navigiere zur CSS-Datei des Themes -> die könnte z.B. base.liquid heißen. Füge den folgenden CSS-Code am Ende der Datei ein:

.custom-header {
  background-color: #f9f9f9; /* Hintergrundfarbe */
  border-bottom: 1px solid #e1e1e1; /* Rahmen */
}

.custom-nav {
  display: flex;
  justify-content: space-around; /* Gleichmäßiges Verteilen der Links */
}

.custom-nav a {
  text-decoration: none;
  color: #333; /* Textfarbe */
  padding: 10px 20px; /* Abstand */
}

.custom-nav a:hover {
  text-decoration: underline; /* Effekt beim Überfahren mit der Maus */
}

Du kannst den CSS-Code natürlich an das Design deines Shops anpassen.Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!