Höhe Erweitertes Menü / Advanced Menu ändern

Shopware 5 Themes & Design
1

Hallo zusammen,

ich habe ein paar Anpassungen in der Schriftgröße gemacht und meine meine Spaltenanzahl im erweiterten Menu auf 6 Spalten erhöht mit diesem Code erhöht:

        &.columns--4 {
            -moz-column-count: 6;
            -webkit-column-count: 6;
            column-count: 6;

Leider wird mir das Menü, ohne für mich erklärlichen Grund bei manchen Kategoriebäumen (mit viel Unterkategorien) nicht mehr auf einem Bildschirm angezeigt. Wie kann ich die Höhe begrenzen oder einstellen, dass der Spaltenumbruch “sinnvoller” erfolgt? Das müsste dann natürlich auch responsive, also ebenso für die Tablet-Ansichten gelten.

Vielen Dank.

Beste Grüße,
Manuel

451×821 30.7 KB
 

2

Hey,

da du das Advanced Menü verwendest, kannst du hier doch einfach per CSS rangehen oder? 

Als Idee: Es gibt ja die Klasse: .advanced-menu

Definiere dort doch Viewportabhängig eine max-height und arbeite z.B. mit overflow:scroll zusätzlich. 

.advanced-menu {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 10px 25px -15px #000;
    color: #3f4c58;
    max-height: 50rem;
    max-width: 78.75rem;
    overflow: scroll;
    position: absolute;
    width: 100%;
    z-index: 3000;
}

Wenn ich die Anpassung bei mir so vornehme, wird das Menü im Browser angezeigt und ich kann dann per Mausrad weiter nach unten scrollen. Habe das ganze gerade aber nur über Firebug getestet und angeschaut :wink:

Liebe Grüße

Kevin

3

Hallo Kevin,

erstmal danke für den Tipp. Das funktioniert natürlich und würde auch problemlos klappen, nur trifft es nicht ganz meine Wünsche, denn ich will ja keinen Scrollbalken in der Kategorieauswahl haben.

Vielmehr will ich die max-height auf sagen wir z.B. 30rem begrenzen, der Umbruch in die nächste Spalte muss dann aber “besser” erfolgen. Gedanklich also in etwa so:

Wenn Platz in Spalte zu klein, dann Umbruch auf nächste Spalte (am besten immer ab Kategorie-Ebene 2 und nicht 3).

Ich hoffe ich konnte mich etwas verständlich ausdrücken.  Smile
Leider reichen meine Kenntnisse hier nicht aus.

4

Uns sind die Höhen der aufklappenden oberen Menüs zu groß. Durch den zu großen Abstand zwischen den angezeigten Menüs wird der Hintergrund zu stark abgedeckt. Wo kann man die Höhe bzw. den Abstand dafür einstellen bzw. den Leerraum verkleinern?

5

Hallo happy,

ich habe folgende Lösung auch an anderer Stelle gerade im Forum geschrieben. Vielleicht hilft dir das ja. Ich gebe die max-height an folgenden beiden Stellen vor:

.advanced-menu {
  	max-height: 40rem;

    .menu--list {
		max-height: 38rem;
    }

Ich hoffe das hilft, bzw. ist das was du meintest.  Smile

Gruß, Manuel

6

Mein Advanced Menü wird nicht mehr angezeigt seit ich die Größe des Logos verändert habe. Alles etwas merkwürdig.

 

7

Wo findet man diese CSS?

 

8

@shopwaredummy schrieb:

Wo findet man diese CSS?

 

Hier:

../engine/Shopware/Plugins/Default/Frontend/AdvancedMenu/Views/frontend/_public/src/less/advanced-menu.less

Ändere aber nicht diese Datei, sondern leg dir eine in deinem eigenen Theme an.

1 „Gefällt mir“
9

Danke das hatte ich schon gefunden aber nicht gedacht das es die richtige css ist.
Muss das im eigenen template unter dem gleichen langen Pfad sein? Sprich also 11 Verzeichnisse tief?
Also erstmal kopieren und alles was man nicht ändern will löschen?
Habe des jetzt mal in themes/Frontend/meintemplate/frontend/AdvancedMenu/Views/frontend/_public/src/less/  kopiert

10

Ok habe es hoffentlich korrigiert. Liegt nun in

themes/Frontend/meintehme/frontend/_public/src/less/_plugin
In der all.less
habe ich @import “_plugin/advanced-menu”; eingefügt und in der advanced-menu oben 

.advanced-menu-main {

Sollte hoffentlich richtig sein.
Nur tut sich nix bei Änderungen. Themes auch neu kompiliert . ?? Was ist noch falsch?

 

11

Du hast hier ja geschickt das Thema gekapert…

Nur tut sich nix bei Änderungen. Themes auch neu kompiliert . ?? Was ist noch falsch?

Vielleicht ist in deinem less etwas falsch. Versuche es doch erst einmal mit einem ganz simplen Eintrag in less, der garantiert richtig ist und den man auch erkennen kann, dann weißt du, ob das less richtig eingebunden ist.

12

Naja soll ich schon wieder ein extra Thema aufmachen wenn ich genau an dem Problem da oben hänge? :slight_smile:
Das Menü ist einfach riesig. Der das geschrieben hat muss wohl halb blind gewesen sein :slight_smile: Weniger wegen vielen Menüeintragen sondern großen Abständen und großer fetter Schrift.