Mega Menu Dawn - 2nd Level Bold

Deutsch Diskussion Shopify Design
1

Hallo,

ich nutze das Dawn 2.0 Theme und wollte mein 2nd Level im Shop Bold machen.

Dafür habe ich eine Lösung hier gefunden:

https://community.shopify.com/c/shopify-design/need-help-changing-mega-menu-text-on-dawn-theme/td-p/1714524

Diesen Code habe ich im base.css eingebaut:

.mega-menu__link–level-2,
.header__menu-item span {
font-weight: bold;
}

Mit dieser Lösung ist aber auch das 1st Level Bold. Das wollte ich eigentlich vermeiden. Nur 2nd level sollte Bold sein, also “Radfahren”, “Indoor-Training”, etc.

Mein Shop: https://paceheads.com/

2

Hey @PaceheadsFabi

Danke für die Frage und du kannst z. B. eine spezielle Class hinzufügen, die nur die zweite Ebene deines Menüs anspricht. Zum Beispiel:

- Second Level Menu Item

Dann diese Class in deinem CSS targeten, um sie Bold zu machen mit einem Code wie das folgende:

.header__menu-item--level-2 .mega-menu__link--level-2 {
  font-weight: bold;
}

So sollte nur das second level eine Bold Schrift erhalten. Bei weiteren Fragen dazu kann ich gerne einen Experten empfehlen!

Frage dazu: wollt ihr auch beispielsweise einen roten “Sale” Menüpunkt im ersten Level in das Menü einbauen, dass eure Besucher schneller auf eure tollen Angebote aufmerksam machen kann?

VG

3

Hi Gabe,

danke für deine schnelle Antwort!

Wie kann ich eine neue Class hinzufügen? Kannst du mir das kurz sagen? Bin leider überhaupt nicht drin im Coding mit Shopify.

4

@PaceheadsFabi

Das kannst du alles in einer Kopie des Dawn Themes testen aber alle Angaben hier sind ohne Gewähr. Bitte auch nicht vergessen, dass 1) Codeänderungen zu langsameren Page Ladezeiten führen können, und 2) dein Theme aus den automatischen Theme Updates ausschließen kann und du dann das Theme immer manuell updaten musst. Weisst du wie du eine Kopie erstellst?

Dann entweder im folgenden File einsetzen:

  • header.liquid: Diese Datei enthält den Code für den Header deiner Website, einschließlich des Hauptmenüs. ODER:
  • menu.liquid: Diese Datei kann in einigen Themes zum Rendern des Menüs verwendet werden.

Sobald du die Datei gefunden hast, in der dein Menü definiert ist, kannst du die Klasse zum entsprechenden li Element für die Menüpunkte der zweiten Ebene ergänzen und speichern. Hier ist ein Beispiel:

- Second Level Menu Item

Hier wäre es wahrscheinlich erwägenswert eine Experten zu konsultieren der dann deinen Code anschaut, und gerne kann ich welche empfehlen!