# Einzelnen Menupunkt in Top Navigation Abheben. **URL:** \ **Category:** Themes & Design\ **Created:** [29. Juni 2017 um 18:11 UTC](https://forum.shopware.com/t/einzelnen-menupunkt-in-top-navigation-abheben/46616 "2017-06-29T18:11:07Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![QuasiPasi](https://avatars.discourse-cdn.com/v4/letter/q/35a633/32.png) [@QuasiPasi](https://forum.shopware.com/u/QuasiPasi)\ **Post date:** [29. Juni 2017 um 18:11 UTC](https://forum.shopware.com/t/einzelnen-menupunkt-in-top-navigation-abheben/46616/1 "2017-06-29T18:11:07Z")
Hallo Zusammen, Bei unserem Shop sind alle Artikelkategorien oben in der Top Leiste zu sehen. Ist es möglich, das man einzelnen Kategorien andere Farben zuweist? Meine Idee dazu war: Ich habe die Kategorie erstellt aber habe sie nicht in der Top-Navi anzeigen lassen. Dann habe ich mir das Template (main-navigation.tpll) geöffnet und den Listenpunkt manuell eingefügt mit der jeweiligen Formatierung der Schrift: ``` {block name='frontend_index_navigation_categories_top_before'}{/block} {foreach $sMainCategories as $sCategory} {block name='frontend_index_navigation_categories_top_entry'} {if !$sCategory.hidetop} {$sCategory.description} {/if} Außenbereich ``` Leider weiß ich nicht an welche Stelle ich das eintragen soll. So wie es jetzt ist kommt dei “neue” Kategorie immer wieder im Wechsel mit den anderen Kategorien untereinander vor. Sie soll aber nur einmal ganz am Ende also ganz Rechts stehen. Kann mir jemand helfen?   Beste Grüße Pasi ---
**Author:** ![hds](https://avatars.discourse-cdn.com/v4/letter/h/bb73d2/32.png) [@hds](https://forum.shopware.com/u/hds)\ **Post date:** [29. Juni 2017 um 18:33 UTC](https://forum.shopware.com/t/einzelnen-menupunkt-in-top-navigation-abheben/46616/2 "2017-06-29T18:33:53Z")
Wenn ich es richtig verstehe soll die letzte Kategorie eine andere Farbe bekommen ? das kannst du doch mit less gut hinbekommen ``` &:last-child {deine Farbe;} ```   ---
**Author:** ![QuasiPasi](https://avatars.discourse-cdn.com/v4/letter/q/35a633/32.png) [@QuasiPasi](https://forum.shopware.com/u/QuasiPasi)\ **Post date:** [29. Juni 2017 um 19:25 UTC](https://forum.shopware.com/t/einzelnen-menupunkt-in-top-navigation-abheben/46616/3 "2017-06-29T19:25:20Z")
Hallo,   Danke für die Hilfe, Aber irgendwie werden alle Kategorien jetzt gefärbt. ``` .navigation--link { color: #5f7285; &:last-child {color: #32cd32;} } ``` oder mach Ich das falsch? ---
**Author:** ![sonic](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sonic/32/25728_2.png) [@sonic](https://forum.shopware.com/u/sonic)\ **Post date:** [29. Juni 2017 um 21:30 UTC](https://forum.shopware.com/t/einzelnen-menupunkt-in-top-navigation-abheben/46616/4 "2017-06-29T21:30:08Z")
Hier mal mein Code:   ``` {block name='frontend_index_navigation_categories_top_entry'} {strip} {if !$sCategory.hidetop} {$sCategory.description} {/if} {/strip} {/block} ``` Der relevante Teil ist ``` navigation--itemid--{$sCategory.id} ``` Die Kategorie-ID wird ja im Backend angezeigt. So bekommt jeder Tab eine Class, die Du dann per Less definieren kannst. ---
**Author:** ![hds](https://avatars.discourse-cdn.com/v4/letter/h/bb73d2/32.png) [@hds](https://forum.shopware.com/u/hds)\ **Post date:** [29. Juni 2017 um 21:34 UTC](https://forum.shopware.com/t/einzelnen-menupunkt-in-top-navigation-abheben/46616/5 "2017-06-29T21:34:11Z")
Probier es mal so aus, damit bekommst du für jede Kategorie die ID und damit kannst du diese dann individuell gestalten ``` {extends file="parent:frontend/index/main-navigation.tpl"} {block name='frontend_index_navigation_categories_top_entry'} {if !$sCategory.hidetop} {$sCategory.description} {/if} {/block} ```   ---
**Author:** ![QuasiPasi](https://avatars.discourse-cdn.com/v4/letter/q/35a633/32.png) [@QuasiPasi](https://forum.shopware.com/u/QuasiPasi)\ **Post date:** [30. Juni 2017 um 06:17 UTC](https://forum.shopware.com/t/einzelnen-menupunkt-in-top-navigation-abheben/46616/6 "2017-06-30T06:17:22Z")
Hallo, So klappt es jetzt. Dank euch ---
**Author:** ![livaro2014](https://avatars.discourse-cdn.com/v4/letter/l/439d5e/32.png) [@livaro2014](https://forum.shopware.com/u/livaro2014)\ **Post date:** [25. März 2018 um 18:41 UTC](https://forum.shopware.com/t/einzelnen-menupunkt-in-top-navigation-abheben/46616/7 "2018-03-25T18:41:10Z")
Hallo, ich klinke mich hier auch mal rein. Wie kann ich denn nun auf die ID zugreifen? Vielen Dank ---
**Author:** ![QuasiPasi](https://avatars.discourse-cdn.com/v4/letter/q/35a633/32.png) [@QuasiPasi](https://forum.shopware.com/u/QuasiPasi)\ **Post date:** [27. März 2019 um 07:57 UTC](https://forum.shopware.com/t/einzelnen-menupunkt-in-top-navigation-abheben/46616/8 "2019-03-27T07:57:52Z")
Hallo Zusammen, Ich hatte das Problem ja bereits mal gelöst, und wollte das nun für ein neues Projekt nutzen Doch leider stehe ich gerade total auf dem Schlauch. Wie spreche ich nochmal die einzelnen IDs in der less Datei an? kann mir da jemand weiter helfen?   ---
**Author:** ![QuasiPasi](https://avatars.discourse-cdn.com/v4/letter/q/35a633/32.png) [@QuasiPasi](https://forum.shopware.com/u/QuasiPasi)\ **Post date:** [27. März 2019 um 11:26 UTC](https://forum.shopware.com/t/einzelnen-menupunkt-in-top-navigation-abheben/46616/9 "2019-03-27T11:26:28Z")
Ahh habs doch wieder hin bekommen. Falls das nochmal jemand brauch: ``` .navigation-main .navigation--itemid--82 .navigation--link{ background-color: #32cd32; color: white; } ```   ---
**Author:** ![md\_dm](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/md_dm/32/8939_2.png) [@md\_dm](https://forum.shopware.com/u/md_dm)\ **Post date:** [26. August 2019 um 11:00 UTC](https://forum.shopware.com/t/einzelnen-menupunkt-in-top-navigation-abheben/46616/10 "2019-08-26T11:00:09Z")
Danke an alle die sich hier dem Thema angenommen haben, das hat mir einige Zeit und weiter Plugins gespart.  Dennoch würde ich das Thema gerne wiederbeleben und kein neuen Thread aufmachen. Ich hoffe, das ist OK. Wie verhält sich hier die mobile Version? Diese scheint komplett anders aufgebaut zu sein. In meinem Beispiel handelt sich um ID 39 welche im Desktop Rot ist, aber nicht in mobiler Ansicht. Daher habe ich folgendes im CSS/LESS hinzugefügt.  ``` // mobile view category color red [data-fetchurl="/widgets/listing/getCategory/categoryId/39"] { color: red !important; } ``` Erweitern könnte man es ggf. wenn man den Menüpunkt auswählt, dass dann in mobiler Ansicht auch die anderen 2 aufgezeigten Titel in „rot“ abgebildet werden. Ob das so die richtige Art ist oder man es doch lieber via Template einbaut kann ich nicht sagen. Gerne könnt ihr ja mal eurer Feedback da lassen.