Theme Darstellung Menü in Tablet-Version

Shopware 5 Themes & Design
1

Grundinfos: Shopware 5.5.10, Individualisiertes Plugin auf Basis Responsive entwickelt von einem von Shopware empfohlen Dienstleister Money-Mouth [durchaus teuer, aber eben mit einigen Fehlern]

Frage: Welche Einstellung muss geändert werden? Ich seh es einfach nicht 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.

1260×740 223 KB
   1260px Breite

1259×740 254 KB
1259px Breite

767×740 64.9 KB
767px Breite

1852×354 51.8 KB

Anzeige bei Element untersuchen bei 1259px Breite

 

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;

 

2

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

3

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.

4

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.