Advanced Menu - Aufklappebene nicht bündigt zur Main-Menu-Ebene

Shopware 5 Themes & Design
1

Hallo zusammen,

ich hätte im Advanced Menu gerne dass das Aufklappmenu bündig zur Main-Menu-Ebene ist.
Dazu müsste man ja die Item-Breite irgendwo einstellen können, oder kann man das nur über .unitize-max-width steuern?

Hier der Code:

// Advanced menu container that contains every category listing
@adv-menu-header-bg: #8a4631; //Hover
@adv-menu-header-text-color: #ff5050;//Hover Textfarbe
@adv-menu-bg: #F3E2A9;//Rand Aufklappmenu Aufklappmenu
@adv-menu-text-color: #FA58F4;
@adv-menu-link-color: #333333;//Textfarbe Kategorielinks
@adv-menu-link-hover-color: #F01F1F;
@adv-menu-delimiter: #a9945d;
@adv-menu-teaser-link-color: #111111;
@adv-menu-teaser-link-hover-color: #ff5050;

.advanced-menu {
    .unitize-max-width(1890, 30);
}

.advanced-menu .menu--list-item {
  text-align: center;
}

.advanced-menu .menu--teaser {
  display: none;
}

.advanced-menu .teaser--image {
  display: none;
}

.advanced-menu .button-container {
  display: none;
}

// Hintergrund Aufklappmenu
.advanced-menu .content--wrapper {
        .unitize-margin(0, 30);
        background-color: #F3E2A9;
    }

//Spaltenanzahl verändern
.advanced-menu .menu--level-0 {
    .unitize-padding(10, 10, 0, 10);
    float: left;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;

    &.columns--1 {
        .column-count(1);
    }
    &.columns--2 {
        .column-count(2);
    }
    &.columns--3 {
        .column-count(3);
    }
    &.columns--4 {
        .column-count(6);
    }
}

//Aufklappmenu Abstand nach unten
.advanced-menu .item--level-0 {
    .unitize(padding-bottom, 10);
    .menu--list-item-link {
      font-size: 14px;
    }
  }

.advanced-menu .item-level-1 {
    .unitize(padding-bottom, 10);
    .menu--list-item-link {
      font-size: 13px;
    }
}


//Abstände Aufklappmenu Desktop
@media screen and (min-width: @desktopViewportWidth) {
    .advanced-menu .content--wrapper {
        .unitize-margin(0, 40);
    }

    //Schriftgrößen Aufklappmenu
    .advanced-menu .item--level-0 {
        .menu--list-item-link {
          font-size: 18px;
        }
      }

    .advanced-menu .item-level-1 {
        .menu--list-item-link {
          font-size: 16px;
          font-weight: normal;
        }
    }
}

Beste Grüße aus dem Schwarzwald
Thomas Knab

2

Was hast Du in den Advanced Menu Einstellungen stehen? Teaser Breite?

3

Salli Murmeltier,

884×321 13.3 KB

4

Mach mal Breite des Teaser = 50%!

5

Und dann setz mal ein Teaser ein…

6

Habe Teaser auf 50% gesetzt und die display:none-Geschichten rausgenommen, dass das Bild nicht contained muss ja jetzt erst mal nciht interessieren?
An der Breite ändert dass leider erst mal nichts

http://dev.schwarzwald-maria.de

7

1310×387 159 KB

8

Ja, ich denke Du bastelst da ganz ordnentlich rum…, von daher weis ich nicht, was Du vorher schon alles gemacht hast? Ich würde Dir dringend raten, eine eigene CSS Datei einzubinden, damit Du immer weißt, was Du geändert hast…

9

Nimm mal das max-width: 63 rem raus… :wink:

1910×838 322 KB

1 „Gefällt mir“
10

Salli,

herzlichen Dank. Ich habe da schon eine eigene all.less eingebunden, wie es sich gehört ;-).
Das mit dem Schinken war durchaus ernst gemeint, schick mir Deine Adresse an team@schwarzwald-maria.de dann kommt einer frei Haus.
War gerade unterwegs Schnäpsle holen, deshalb die späte Antwort.

Liebe Grüße
Thomas

11

Zu meinem vollendeten Glück würden mir noch 2 Dinge fehlen.

1.) Vertikale Zentrierung

2.) Das ich genauer definieren kann nach wieviel Buchstaben, bzw. welcher Länge er die Wörter bricht.

12

Den Umbruch kannst Du evtl. mit ­ (soft hyphen) definieren: Bedingter Trennstrich – Wikipedia

Also so z.B.:

Schwarz­wald­schinken

 

 

1 „Gefällt mir“