Mobiles Menü reagiert nur schwerlich

  • Moin,

    wir möchten für ein Project das NatureOne-Theme einsetzen. Nun hat unsere Webseite ein Menü welches aus 4 Hauptpunkten besteht und mitsamt Unterpunkten 10 Menüpunkte umfasst. Das scheint leider so ziemlich an der Grenze zu liegen, an der das Responsive-Design ein wenig zu spinnen beginnt. Schaut man die Seite im Handy oder auf einem Tablet an, reagiert die Scrollfunktion innerhalb des Menüs nämlich oft nicht, sodass die komplette Seite herabscrollt.

    Gibt es da ne Möglichkeit die Anzeige des Menüs einfach zu vergrößern, sodass direkt von Beginn an alle Unterpunkte in dem ausklappbaren Menü des Designs für kleine Bildschirme ausfahren und man gar nicht mehr im Menü selbst scrollen muss?

    Ich hoffe aus dem Text geht einigermaßen hervor was das Problem ist, zur Not kann ich aber gerne noch Screenshots von der Problematik nachreichen, die ich dann allerdings erst anfertigen müsste.

    Vielen Dank schonmal!

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Versuch mal das in der style.css deines Child-Themes

    CSS
    @media screen and (max-width: 989px) and (min-width: 720px)
    .nav {
      height: auto !important;
    }

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Versuch mal das in der style.css deines Child-Themes

    CSS
    @media screen and (max-width: 989px) and (min-width: 720px)
    .nav {
      height: auto !important;
    }


    Moin,
    das scheint leider nicht zu funktionieren, im Grunde sehe ich gar keinen Unterschied, wenn ich das einsetze : /

  • Dann habe ich wohl dein Problem falsch verstanden. Kannst du mal ein Screenshot machen und die Stelle markieren, die dich stört?

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Selbstverständlich.

    http://i.imgur.com/60ho7JS.jpg
    Hier sieht man das Menü ausgefahren auf einem iPhone im Landscape-Mode. Hier lässt es sich auch vernünftig scrollen, sprich mit dem Finger drauf, Menü hoch und runterschieben, die Seite an sich bleibt an ihrer Stelle.
    Öffnet man das Menü so auf beispielsweise einem Android-Handy, dann öffnet sich das Menü zwar, aber wenn man über die Menüpunkt streicht, um das Menü zu schieben, schiebt man die komplette Seite hoch und runter. Das Menü scrollt eigentlich nur auf gut glück und wenn man es "anstupst" statt zu schieben.

    Dass sich die ganze Seite nicht auf die Bildschirmbreite ausdehnt ist dann wieder ein anderes Problem...

  • Bei welcher Auflösung tritt das Problem denn auf?

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Bei welcher Auflösung tritt das Problem denn auf?

    scheinbar nur bei recht niedrigen. Ich habe es für mich immer auf nem iPhone 5S getestet und heute halt noch mein altes iPhone 4 mitgenommen, die beiden zeigen das Menü problemlos an und ermöglichen ein angenehmes scrollen (Header und Slider springen aber auch da nicht auf die volle Breite).
    Ich wäre tendenziell ja geneigt angesichts dieser Sache nun zu sagen "irgendwann ist Technik halt veraltet, mit dem Netscape Navigator sehen aktuelle Seiten auch furchtbar aus", aber es wurmt mich doch schon :D

  • Ich bräuchte schon eine Pixel-Zahl. Ich besitze weder ein iphone5 noch das 4. In CSS arbeitet man unter anderem halt mit Pixeln.

    In meinem Code oben müsstest du nur vermutlich die richtigen Zahlen eintragen.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Ich bräuchte schon eine Pixel-Zahl. Ich besitze weder ein iphone5 noch das 4. In CSS arbeitet man unter anderem halt mit Pixeln.

    In meinem Code oben müsstest du nur vermutlich die richtigen Zahlen eintragen.

    Über die Pixelzahlen haben wir das nun auch gelöst und betagtere Geräte anzusprechen. Danke Dir für die Hilfe! :)

    Verbleibt nun noch das Problem, dass sich der Slider nicht an die Displays von Smartphones anpasst, sondern in etwa bei der Hälfte aufhört und somit die Seite verzerrt.
    http://imgur.com/OfsZuaX

  • In der Demo skaliert der Slider schön mit, oder sehe ich das falsch?

    Zu deinem Slider kann ich nichts sagen, da ich den Link nicht kenne.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!