# Theme Darstellung Menü in Tablet-Version

**URL:** <https://forum.shopware.com/t/theme-darstellung-menu-in-tablet-version/60935>\
**Category:** Themes & Design\
**Created:** [8. August 2019 um 08:43 UTC](https://forum.shopware.com/t/theme-darstellung-menu-in-tablet-version/60935 "2019-08-08T08:43:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rabattz](https://avatars.discourse-cdn.com/v4/letter/r/8edcca/32.png) [@Rabattz](https://forum.shopware.com/u/Rabattz)\
**Post date:** [8. August 2019 um 08:43 UTC](https://forum.shopware.com/t/theme-darstellung-menu-in-tablet-version/60935/1 "2019-08-08T08:43:51Z")

</div>

**Grundinfos:** Shopware 5.5.10, Individualisiertes Plugin auf Basis Responsive entwickelt von einem von Shopware empfohlen Dienstleister ![Money-Mouth](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/money-mouth.png "Money-Mouth") [durchaus teuer, aber eben mit einigen Fehlern]

**Frage:** Welche Einstellung muss geändert werden? Ich seh es einfach nicht ![Gasp](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/gasp.png "Gasp")

**Problem:** Bei Unterschreitung der Breite 1260px wird das „Kategoriemenü“ oben (Main-navigation, „gelb, rot, blau“) nicht mehr angezeigt. Ab 767px und kleiner erfolgt der Wechsel in die Handydarstellung mit einer Menüdarstellung oben links (drei Striche). In den Tabletauflösungen hat das Frontend keinerlei angezeigtes Menü bzw. wird die Box mit Höhe 0px ausgegeben.

Grundsätzlich sollte aber das „Kategoriemenü“ oben (Main-navigation) und das rechts angezeigte „Filtermenü“ für Geschlecht, Alter, Preisklasse usw. auf Desktop, Tablet quer und hoch erscheinen.

 ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/9/9d05ce04acdabef67e3ea2a5d355b1d08d3e9ac4.jpeg)&nbsp;&nbsp; 1260px Breite

 ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/6/667f56c1bf16c324d3675c7268aa0aaabf3958ab.jpeg) 1259px Breite

 ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/a/a266f79649cbe8b69c370f127f377721855ecce9.png) 767px Breite

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

Anzeige bei Element untersuchen bei 1259px Breite

&nbsp;

**Hier die main-navigation.less aus dem individualisierten Template:**

```
.navigation-main {
  background: transparent;

  @media screen and (min-width: @tabletViewportWidth) {
    border-bottom: none;
  }

  .container {
    background: transparent;
  }

  > .container {
    display: none;

    &:not(.scroller) {
      @media screen and (min-width: @desktopViewportWidth) {
        display: block;
      }
    }

    &.scroller {
      @media screen and (min-width: @tabletViewportWidth) and (max-width: @tabletLandscapeViewportWidth - 1) {
        display: block;
      }

      .js--menu-scroller--arrow {
        border-radius: 0;
        .unitize-width(30);
        .unitize-height(50);
        .unitize(line-height, 50);
        background-clip: border-box;
        border: 1px solid @body-bg;
        background: @brand-primary;
        color: #FFFFFF;
      }
    }
  }

  .navigation--list {
    @media screen and (min-width: @tabletViewportWidth) and (max-width: @desktopViewportWidth - 1) {
      .unitize-padding(0, 30);
    }

    @media screen and (min-width: @tabletLandscapeViewportWidth) {
      .flex-box();
      white-space: normal;
    }
  }

  .navigation--entry {
    @media screen and (min-width: @tabletViewportWidth) {
      .flex-grow(1);
      .flex-basis(0);
    }

    .navigation--link {
      @media screen and (min-width: @tabletViewportWidth) {
        .unitize-padding(0, 15, 10);
        .unitize(font-size, @font-size-base);
        .border-radius(0);
        background: no-repeat center top;
        background-size: 100% 100%;
        .unitize-height(50);
        line-height: 1rem;
        text-align: center;
        color: @main-navigation-link-color;
        .transition(color 0.4s);
      }

      span {
        @media screen and (min-width: @tabletViewportWidth) {
          display: block;
          position: relative;
          top: 50%;
          .translate(0, -50%);
        }
      }

      &:hover {
        @media screen and (min-width: @tabletViewportWidth) {
          color: @main-navigation-link-hover-color;
        }
      }
    }

    &.is--home {
      display: none;
    }

    &:nth-child(3n+2) {
      .navigation--link {
        @media screen and (min-width: @tabletViewportWidth) {
          background-image: url("@{path-img}/main-navigation-entry-3n+1-background.png");
        }
      }

      &:not(:last-child) .navigation--link {
        @media screen and (min-width: @tabletViewportWidth) {
          .unitize(padding-right, 25);
        }
      }

      + .navigation--entry {
        @media screen and (min-width: @tabletViewportWidth) {
          .unitize(margin-left, -15);
        }
      }
    }

    &:nth-child(3n+3) {
      .navigation--link {
        @media screen and (min-width: @tabletViewportWidth) {
          background-image: url("@{path-img}/main-navigation-entry-3n+2-background.png");
        }
      }

      &:not(:last-child) .navigation--link {
        @media screen and (min-width: @tabletViewportWidth) {
          .unitize(padding-right, 20);
        }
      }

      + .navigation--entry {
        @media screen and (min-width: @tabletViewportWidth) {
          .unitize(margin-left, -15);
        }
      }
    }

    &:nth-child(3n+4) {
      .navigation--link {
        @media screen and (min-width: @tabletViewportWidth) {
          background-image: url("@{path-img}/main-navigation-entry-3n+3-background.png");
        }
      }

      &:not(:last-child) .navigation--link {
        @media screen and (min-width: @tabletViewportWidth) {
          .unitize(padding-right, 15);
        }
      }

      + .navigation--entry {
        @media screen and (min-width: @tabletViewportWidth) {
          .unitize(margin-left, -5);
        }
      }
    }
  }

  .is--active .navigation--link {
    @media screen and (min-width: @tabletViewportWidth) {
      font-weight: @font-base-weight;
      color: @main-navigation-link-active-color;
    }

    &:hover {
      @media screen and (min-width: @tabletViewportWidth) {
        color: @main-navigation-link-active-hover-color;
      }
    }
  }
}

```

**Hier die Einstellungen der Auflösungen (variables.less):**

```
// Paths
@path-img: "../../../../../../Spika/frontend/_public/src/img";

// Structure
@phoneLandscapeViewportWidth: 30em; // 480px
@phoneLandscapeViewportWidthMax: 47.9375em; // 767px

@tabletViewportWidth: 48em; // 768px
@tabletViewportWidthMax: 63.9375em; // 1023px

@tabletLandscapeViewportWidth: 64em; // 1024px
@tabletLandscapeViewportWidthMax: 78.688em; // 1259px

@desktopViewportWidth: 78.75em; // 1260px

// Scaffolding
@top-bar-bg: #FFFFFF;
@top-bar-link-color: @link-color;
@btn-events-secondary: #621b03;

@header-bg: #FFFFFF;

@main-navigation-link-color: @link-color;
@main-navigation-link-hover-color: #FFFFFF;
@main-navigation-link-active-color: #FFFFFF;
@main-navigation-link-active-hover-color: #FFFFFF;

// Typography
//
// Basic configuration
@font-base-weight: 400;

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\
**Post date:** [8. August 2019 um 08:52 UTC](https://forum.shopware.com/t/theme-darstellung-menu-in-tablet-version/60935/2 "2019-08-08T08:52:31Z")

</div>

Ist es nicht die Aufgabe des Dienstleisters diese Fehler zu beseitigen?

---

<div class="post-metadata">

**Author:** ![Rabattz](https://avatars.discourse-cdn.com/v4/letter/r/8edcca/32.png) [@Rabattz](https://forum.shopware.com/u/Rabattz)\
**Post date:** [8. August 2019 um 09:41 UTC](https://forum.shopware.com/t/theme-darstellung-menu-in-tablet-version/60935/3 "2019-08-08T09:41:07Z")

</div>

Da der Dienstleister nicht in der Lage war das Projekt (kurz: erstelle ein Grundtheme mit 3 fablichen Abwandlungen, koordiniere die Anbindung an die Warenwirtschaft mit dem verfügbaren WW-Plugin) in der im Lastenheft vorab vereinbarten Laufzeit zu beenden (5 Monate Verzug bei 6 Monaten Projektdauer), noch am Ende Vertrauen in die tatsächlichen Fähigkeiten des verantwortlichen Teamleiters beim Dienstleister gab, ist eine Zusammenarbeit eher unwahrscheinlich. Hier würde man in einen langen rechtlichen Diskurs sehenden Auges rennen, ohnen nur einen Pixel des Menüs kurzfristig zu sehen. Daher die Anfrage hier.

---

<div class="post-metadata">

**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\
**Post date:** [8. August 2019 um 10:54 UTC](https://forum.shopware.com/t/theme-darstellung-menu-in-tablet-version/60935/4 "2019-08-08T10:54:56Z")

</div>

Scheint aber nur ein CSS Fehler innerhalb von nav.navigation-main zu sein:

Wenn sich ein DIV bei 1260px abschaltet (CSS display:none), muss sich das andere DIV (container scroller js–menu-scroller) zuschalten (CSS display:block). Weil das nicht passiert, wird auch nichts angezeigt.