# Mobile Seite (Offcanvas) auffrischen

**URL:** <https://forum.shopware.com/t/mobile-seite-offcanvas-auffrischen/47631>\
**Category:** Themes & Design\
**Created:** [17. August 2017 um 05:20 UTC](https://forum.shopware.com/t/mobile-seite-offcanvas-auffrischen/47631 "2017-08-17T05:20:33Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gesundwuerzen](https://avatars.discourse-cdn.com/v4/letter/g/8c91f0/32.png) [@Gesundwuerzen](https://forum.shopware.com/u/Gesundwuerzen)\
**Post date:** [17. August 2017 um 05:20 UTC](https://forum.shopware.com/t/mobile-seite-offcanvas-auffrischen/47631/1 "2017-08-17T05:20:33Z")

</div>

Hallo,

&nbsp;

ich möchte die Darstellung für Mobile etwas auffrischen. Das Design ist ja etwas altbacken. Also das Kategorien-Menü usw. farbig ändern.

Leider weiß ich nicht so recht, wo ich ansetzen soll.

Gibt es eine eigene .less für die mobile Ansicht?

Grüße

Gerhard

---

<div class="post-metadata">

**Author:** ![Gesundwuerzen](https://avatars.discourse-cdn.com/v4/letter/g/8c91f0/32.png) [@Gesundwuerzen](https://forum.shopware.com/u/Gesundwuerzen)\
**Post date:** [17. August 2017 um 11:43 UTC](https://forum.shopware.com/t/mobile-seite-offcanvas-auffrischen/47631/2 "2017-08-17T11:43:29Z")

</div>

![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/7/73f0beeec1388116f0b604b2dfa3bd91d30454bd.png)

Dieses Menü möchte ich farblich anpassen…

---

<div class="post-metadata">

**Author:** ![Gesundwuerzen](https://avatars.discourse-cdn.com/v4/letter/g/8c91f0/32.png) [@Gesundwuerzen](https://forum.shopware.com/u/Gesundwuerzen)\
**Post date:** [18. August 2017 um 05:12 UTC](https://forum.shopware.com/t/mobile-seite-offcanvas-auffrischen/47631/3 "2017-08-18T05:12:05Z")

</div>

hm, hat denn niemand einen Ansatz für mich?&nbsp; ![Blush](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/blush.png "Blush")

---

<div class="post-metadata">

**Author:** ![Gesundwuerzen](https://avatars.discourse-cdn.com/v4/letter/g/8c91f0/32.png) [@Gesundwuerzen](https://forum.shopware.com/u/Gesundwuerzen)\
**Post date:** [20. August 2017 um 06:39 UTC](https://forum.shopware.com/t/mobile-seite-offcanvas-auffrischen/47631/4 "2017-08-20T06:39:40Z")

</div>

–push–

in der sidebar.less habe ich verschiedene Sachen getestet, aber das wirkt sich auch auf die sidebar in der Desktop-Ansicht aus.

Keiner ne Idee?

---

<div class="post-metadata">

**Author:** ![brettvormkopp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/brettvormkopp/32/7788_2.png) [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)\
**Post date:** [20. August 2017 um 07:24 UTC](https://forum.shopware.com/t/mobile-seite-offcanvas-auffrischen/47631/5 "2017-08-20T07:24:34Z")

</div>

Nutze media queries um Änderungen in der Desktopnavigation auszuschliessen

---

<div class="post-metadata">

**Author:** ![Gesundwuerzen](https://avatars.discourse-cdn.com/v4/letter/g/8c91f0/32.png) [@Gesundwuerzen](https://forum.shopware.com/u/Gesundwuerzen)\
**Post date:** [20. August 2017 um 09:12 UTC](https://forum.shopware.com/t/mobile-seite-offcanvas-auffrischen/47631/6 "2017-08-20T09:12:50Z")

</div>

Hi,

leider färbt sich dann die sidebar in der Desktopversion auch.

```
.sidebar--navigation {
  color:#555555;
  overflow:hidden;
  text-overflow:ellipsis;
  background-color:#CCC312;
}

   @media screen and (min-width: @tabletViewportWidth) {

    .offcanvas--overlay {
        display: none;
    }

    .sidebar-main {

usw
usw.

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![Gesundwuerzen](https://avatars.discourse-cdn.com/v4/letter/g/8c91f0/32.png) [@Gesundwuerzen](https://forum.shopware.com/u/Gesundwuerzen)\
**Post date:** [20. August 2017 um 09:57 UTC](https://forum.shopware.com/t/mobile-seite-offcanvas-auffrischen/47631/7 "2017-08-20T09:57:46Z")

</div>

Habe es jetzt mal so rum probiert, und scheint zu funktionieren. Ob das „css-konform“ ist, keine Ahnung.

```
@media screen and (max-width: @tabletViewportWidth){

        .sidebar--navigation {
            overflow:hidden;
            text-overflow:ellipsis;
            background-color:#5C93E0;
        }
        .sidebar--navigation .navigation--link {
            color:#F2F2F2;
            &:hover {
                color: #FFF;
                font-weight: bold;
            }
        }
     }

```

&nbsp;