# Einzelnen Navigationspunkt färben

**URL:** <https://forum.shopware.com/t/einzelnen-navigationspunkt-farben/25303>\
**Category:** Shopware 3.5\
**Tags:** themes--design\
**Created:** [25. Februar 2015 um 19:12 UTC](https://forum.shopware.com/t/einzelnen-navigationspunkt-farben/25303 "2015-02-25T19:12:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Johannes\_R](https://avatars.discourse-cdn.com/v4/letter/j/5daacb/32.png) [@Johannes\_R](https://forum.shopware.com/u/Johannes_R)\
**Post date:** [25. Februar 2015 um 19:12 UTC](https://forum.shopware.com/t/einzelnen-navigationspunkt-farben/25303/1 "2015-02-25T19:12:44Z")

</div>

Hallo, ich würde gerne in der Topnavi einen Punkt/Text in einer anderen Farbe darstellen. Also “Home”, “Hose”, “Jacke” “schwarz” und “Sale” z.B. rot. Ohne Grafiken zu verwenden. Hab als Bezeichnung einfach die CSS eingegeben, aber hat nicht wirklich gut funktioniert. Vielleicht hat jemand Rat für mich 🙂

---

<div class="post-metadata">

**Author:** ![ffinkelm](https://avatars.discourse-cdn.com/v4/letter/f/fbc32d/32.png) [@ffinkelm](https://forum.shopware.com/u/ffinkelm)\
**Post date:** [25. Februar 2015 um 21:29 UTC](https://forum.shopware.com/t/einzelnen-navigationspunkt-farben/25303/2 "2015-02-25T21:29:54Z")

</div>

Das dürfte schwierig werden, da die Topnavi insgesamt per css gestylt wird. Um einzelne Elemente daraus anders darzustellen mußt Du auch für jede Kategorie ein eigenes Style zuweisen. So weit ich das in Erinnerung habe, wird der Style über #mainnavigation definiert. Das müsstest Du nun unterteilen in z.B. #mainnavigation 1, #mainnavigation 2 etc. Gruß Gesendet von meinem GT-I9100 mit Tapatalk 2

---

<div class="post-metadata">

**Author:** ![beeblebrox](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@beeblebrox](https://forum.shopware.com/u/beeblebrox)\
**Post date:** [30. April 2015 um 09:37 UTC](https://forum.shopware.com/t/einzelnen-navigationspunkt-farben/25303/3 "2015-04-30T09:37:35Z")

</div>

Hallo! Das sollte dir weiterhelfen: [http://www.elmastudio.de/programmierung … nth-child/](http://www.elmastudio.de/programmierung/css/css-tipps-die-css-pseudoklassen-selektoren-first-child-last-child-und-nth-child/) sollte dann irgendwie so aussehen: #mainNavigation \> ul \> li:last-child \> a \> span { color: red; }

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [30. April 2015 um 09:43 UTC](https://forum.shopware.com/t/einzelnen-navigationspunkt-farben/25303/4 "2015-04-30T09:43:44Z")

</div>

Entweder du verwendest [:nth-child();](https://css-tricks.com/how-nth-child-works/) Oder du packst im Navigations Template eine Variable welche jedes mal um 1 erhöht wird, sodass du die Menüpnkte ganz normal per #id ansteuern kannst. Ein Beispiel wäre in etwa: [code]{$i = 0} {foreach $sMainCategories as $sCategory} {block name=‚frontend\_index\_navigation\_categories\_top\_entry‘} {if !$sCategory.hidetop}

- {$sCategory.description}  
{/if} {/block} {$i++} {/foreach}[/code] Die #id wäre demnach navigation–1, navigation–2, navigation–3 usw. Wenn du nur den letzten Link in der Navigation anders färben willst, dann ist der Code von @beeblebrox so korrekt.