FROM CACHE - de_header

Brauche Hilfe bei CSS

sbengel
Tourist
7 0 4

Hallo zusammen,

 

ich möchte bei mir ein bisschen was umgestalten und zwar soll je nach ausgewählter Kategorie ein anderes Menü angezeigt werden.

Das habe ich auch mit einer if Abfrage geschafft. Jetzt soll das Menü als Liste (ul/li) angezeigt werden, dass klappt auch.

Was ich aber nicht hinbekomme, ist das der ausgewählte Link hervorgehoben wird (active).

Könnt Ihr mir dabei helfen. Ich füge mal meine Codes ein:

Hier der Code auf der collection.liquid

{% if collection.title == "Kategorie1" %}
<div class="button_filters">      
	{% for link in linklists.gold-untermenue.links %}
      <ul><li class"active"><a href="{{ link.url }}">{{ link.title }}</a></li></ul>
	{% endfor %}
</div>
{% endif %}


Hier der style.scss.liquid

.button_filters {margin: 20px 0;
	ul {font-size: 0;display: inline-block;}
	li {display: inline-block;margin: 10px 10px 0 0;}
	a {display: block;padding: 7px 10px;background: rgba( 0,0,0,.1 );font-size: $base_font_size;text-transform: capitalize;}
	.active a {background: $color_4;color: $color_3;}
}

 
So wie es jetzt ist, werden alle Links als active dargestellt.

Danke schon mal für die Hilfe.

LG Andi

1 ANTWORT 1
r8r
Shopify Expert
2350 305 834

Hi @sbengel,

zum Einen fehlt das „=“ beim class-Attribut, zum anderen die Überprüfung, ob der jeweilige Link tatsächlich der aktuellen Seite entspricht:

 

{% if collection.title == "Kategorie1" %}
<div class="button_filters">      
	{% for link in linklists.gold-untermenue.links %}
      <ul><li{% if link.active %} class="active"{% endif %}><a href="{{ link.url }}">{{ link.title }}</a></li></ul>
	{% endfor %}
</div>
{% endif %}

Das sollte dein Problem lösen!

LG, Mario

 

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte