# Navigation linke Startseite Darstellung SW 5.0

**URL:** <https://forum.shopware.com/t/navigation-linke-startseite-darstellung-sw-5-0/26310>\
**Category:** Themes & Design\
**Created:** [17. April 2015 um 12:43 UTC](https://forum.shopware.com/t/navigation-linke-startseite-darstellung-sw-5-0/26310 "2015-04-17T12:43:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![AromasShop](https://avatars.discourse-cdn.com/v4/letter/a/f6c823/32.png) [@AromasShop](https://forum.shopware.com/u/AromasShop)\
**Post date:** [17. April 2015 um 12:43 UTC](https://forum.shopware.com/t/navigation-linke-startseite-darstellung-sw-5-0/26310/1 "2015-04-17T12:43:55Z")

</div>

Hallo, hat schon jemand am Responsive Design der 5er Version gemacht ? Wir würden gerne den Zeilensabstand der Kategorien (einzelne Menüpunkte) im Side-Bar Menu enger darstellen weil wir immer ca 15-25 Punkte haben Meines Erachtens ist

 dafür zuständig,da sie auch die class “navigation–smartphone” einschliesst.  
Gibt es eine generelle Vereinbarung für die Darstellung der einzelnen Kategorien auf dieser Ebene oder muss das für alle Desktop, Smartphon etc einzeln gemacht werden.  
Bisher habe ich noch keinerlei Doku gefunden über das neue Responsive Design.  
[www.aromasdelmundo.de](http://www.aromasdelmundo.de)

---

<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:** [17. April 2015 um 14:32 UTC](https://forum.shopware.com/t/navigation-linke-startseite-darstellung-sw-5-0/26310/2 "2015-04-17T14:32:56Z")

</div>

Hier ist ein entsprechender Beitrag für SW5: [https://devdocs.shopware.com/designers- … tup-guide/](https://devdocs.shopware.com/designers-guide/theme-startup-guide/)

---

<div class="post-metadata">

**Author:** ![AromasShop](https://avatars.discourse-cdn.com/v4/letter/a/f6c823/32.png) [@AromasShop](https://forum.shopware.com/u/AromasShop)\
**Post date:** [18. April 2015 um 10:03 UTC](https://forum.shopware.com/t/navigation-linke-startseite-darstellung-sw-5-0/26310/3 "2015-04-18T10:03:01Z")

</div>

Vielen Dank für die Informationen, der Link ist sehr hilfreich um sich einen Überblick zu verschaffen über den Aufbau eines Themas. Lösung: Als erstes im Backend ein neues Thema erzeugen, ein Vorschaubild für das Thema erstellen, die Logos etc für die verschiedenen Ausgabegeräte im neuen Thema hinterlegen Die Änderung für die Darstellung habe ich dann in der Datei sidebar.less gemacht: In der Section für die erste Ebene der Kategoriendarstellung @media screen and (min-width: @tabletViewportWidth) { .navigation–headline { .unitize-margin(10, 10, 10, 10); /\* auf die gewünschten margins ändern } und einige Zeilen weiter .navigation–link { .unitize-padding(5, 10); /\* passendes padding einstellen sowie .is–level1 { … .navigation–entry { .navigation–link { sowie .is–level2 { .unitize(font-size, 12); // die Schriftgöße jeweils die Werte für margin und/oder padding ändern,evtl. auch die Schriftgröße (bei der Schriftgröße habe ich nicht kontrolliert ob diese evtl. von den Einstellungen, die im Backend gemacht werden, überschrieben wird.) Diese Wert sind zuständig für den Desktop und das Tablet in Viewport Breite, für die Darstellung auf Handys müssen die Änderungen von padding und margin jweils in der Section .mobiles-switches ind Off-Canvas gemacht werden. Ist insgesamt ein bisschen aufwendiger mit den verschiedenen Views auf Desktop, Handy oder Tablet aber funktioniert ganz gut. Wichtig. Am Ende Cache leeren und neu aufbauen Ich habe ausserdem auch noch einen weiteren guten Link gefunden: [https://devdocs.shopware.com/styletile/index.html](https://devdocs.shopware.com/styletile/index.html)

---

<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:** [18. April 2015 um 10:13 UTC](https://forum.shopware.com/t/navigation-linke-startseite-darstellung-sw-5-0/26310/4 "2015-04-18T10:13:16Z")

</div>

Wow - endlich mal einer der sich einen Link durchgelesen hat und tatsächlich alles mit Eigeninitiative geschafft hat :thumbup:
