Hauptmenü - Drop Down Menü - Frage

[IT-Testlauf]

Schönen guten Tag, 

ich habe eine Frage bezüglich des Hauptmenüs und ob es dort eine Möglichkeit gibt dieses komplett auszublenden, es aber trotzdem in der mobilen Ansicht über den kleinen Button zu sehen ist per Dropdown. Ich versuche das ganze Mal mit ein paar Screenshots zu verdeutlichen. PrestaShop Version ist 1.7.2.4. und wir verwenden die Standard Templates. Sieht alles noch nicht so schön aus, aber das kommt noch.

In diesem Fall ist das Hauptmenü am displayTop Hook befestigt und soll dort aber so nicht mehr zu sehen sein und auch sonst nirgendwo auf den folgenden Seiten, weil wir die Navigation anders gestalten wollen.

Wenn ich jetzt das Fenster des Browsers verkleinere oder den Shop in der mobilen Ansicht per Smartphone betrachte, erscheint der kleine Button für das Dropdown Hauptmenü. Hier soll das Hauptmenü weiterhin angezeigt werden auf jeder Seite. Wenn ich das Hauptmenü an keinem Hook befestige, wird es auch nicht mehr in der mobilen Ansicht angezeigt.

Ich hoffe ich konnte mein Problem genügend beschreiben und jemand hat einen kleinen Tipp für mich.
Falls noch weitere Infos benötigt werden, versuche ich diese natürlich zu liefern.

Beste Grüße!

 

 

[Shad86]

Das würde ich per CSS umsetzen. Du kannst mit

@media (min-width: 800px) {
    .top-menu {
  display:none;
}

Das Menü ab einer Breite von 800px verbergen. Dann ermittelst du, wann genau das Template auf mobil umspringt und machst ab einem Pixel mehr die Navigation weg. Ob es sich am besten mit dem top-menu ausblenden lässt müsste man jetzt ausprobieren.

[IT-Testlauf]

Ahh, das hat testweise schon mal geklappt! Jetzt muss es nur noch in der Datei geändert werden, aber so über Firefox hat es geklappt, wie du es beschrieben hast.
Vielen Dank!

[Shad86]

Das ganze kannst du dann ja einfach in deine theme.css ans Ende einfügen. Sollte sich eigentlich nicht mit irgendwas anderem überschneiden.

[IT-Testlauf]

Ich muss hier nochmal etwas fragen. Also im Browser, wenn ich dort das Fenster minimiere funktioniert jetzt alles. Das Hauptmenü wird nur noch angezeigt, wenn das Fenster sehr klein ziehe und dann als Dropdown Menü. 

Das Problem ist jetzt, dass es auf mobilen Geräten irgendwie nicht funktioniert. Es soll eben auch über Firmenhandys abgerufen werden und da klappt es aktuell nicht. In der Firma werden generell nur iPhone SE und 7 vergeben, für diese Größen sollte es also passen.

Weiß da jemand eine Lösung, wie man das ganze lösen könnte?

Beste Grüße!

 

[Shad86]

Richtige Handys holen? :-P

Du müsstest jetzt nur heraus finden welche Bildschirmbreite eure mobilen Geräte haben. Und dann musst du in der CSS die @media (min-width:xx) auf die passende Breite bringen. Du hast da jetzt z.B. min:800px stehen. Das heißt das alles was breiter als 800 Pixel ist, die Navigation nicht angezeigt bekommt. In der CSS wird ja auch irgendwo geregelt ab welcher Breite die Navigation zur Mobilen wird, das müsstest du halt auch dementsprechend hoch drehen.

Ich hab da bei uns auch schon dran rumgedreht, deshalb kann ich nicht hundert pro sagen wo du was einstellen musst. Da wär evtl. ein Link hilfreicher. Und wie gesagt die Bildschirmbreite deiner Geräte müsste man wissen.

Edited December 20, 2017 by Shad86 (see edit history)

[IT-Testlauf]

Hey, danke erstmal für deine schnellen Antworten.

Also aktuell ist es glaube ich auf min 768px, weil es ab 767 auf die mobile Ansicht springt. Wenn ich das Fenster vom Browser auf unter 767 ziehe, dann funktioniert das Dropdown Menü auch. Ist es über 767 wird das Hauptmenü wie gewollt nicht angezeigt. Nur halt nicht, wenn es auf dem Handy geöffnet wird. Das Hauptmenü wird wie gewollt nicht im Header angezeigt, allerdings auch nicht im Dropdown über den Button.
Da ist die Breite ja noch kleiner, also sollte es doch eigentlich so funktionieren wie es aktuell eingestellt ist oder nicht?

Also vom iPhone 7 ist es 374 x 667.
Vom iPhone SE: 320 x 568.

 

[Shad86]

Es kann gut sein das der IPhone Browser so tut als wär er Breiter. Das ganze quasi gezoomt anzeigt. Wenn er das Hauptmenü nicht anzeigt und das mobile Menü auch nicht würde ich sagen liegt die Breite über 768.

Das habe ich gerade im Netz gefunden: http://www.kylejlarson.com/blog/iphone-6-screen-size-web-design-tips/

Da steht das das IPhone sogar mit 1080 Pixeln läuft. Du kannst dich aber auch mit den @media Befehlen befassen, ich meine das konnte man auch explizit erkennen lassen das ein Gerät ein Iphone ist und dann die CSS Befehle dort noch einmal einfügen. Also für Navi weg und die mobile Navi anzeigen.

 

Edit: Im Netz gab es die Info das folgender Befehl im Head der Seite diese Pixel auf die wirkliche Breite des Diplays zwingt:

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />

Müsste man mal testen wie sich das dann beim Shop verhält.

Edited December 20, 2017 by Shad86 (see edit history)

[IT-Testlauf]

Okay, das ist ja schon mal eine Spur, danke dafür!

Da ich leider selber relativ wenig machen kann und mehr für die Informationsbeschaffung da bin, werde ich gleich mal einen Entwickler bei uns fragen, der sich das mal angucken soll

Werde mich melden sobald es gelöst ist.

 

Ich habe zum Verständnis nochmal 2 Bilder gemacht, was genau nicht geht. 

Wenn ich kein Gerät auswähle und die Breite unter 768 setze, wird es angezeigt, wähle ich ein iPhone 7 z.B. aus, haut es nicht mehr hin. Der Sprung bei 767 ist schon okay, daran möchte ich nichts ändern. Wenn ich das jetzt nach oben drehe, springt er ja auch im Browser auf dem PC viel eher in die mobile Ansicht. Hoffe, dass es mein Problem nochmal verdeutlicht hat.

Edited December 20, 2017 by IT-Testlauf (see edit history)