Fehler: Mobiles Menu auf ipad

Karl Grosch's Avatar

Karl Grosch

30 Jul, 2019 01:27 PM

Produkt: Tao Contao
Contao-Version: 4.4
Browser und Browserversionen: alle

Ich habe die Menuausgabe für ipad (Tablet) auf mobil umgestellt (analog zu dem threat /discussions/contao/11684), weil die Darstellung der Horizontalnavigation im Hochformat des Tablets unschön ist.
Der Hamburger wird zwar nun angezeigt und die Funktionalität der mobilen Navigation ist gegeben aber der Hamburger hängt nun über der Headerbar. siehe Screenshot

  1. Support Staff 1 Posted by RockSolid Theme... on 31 Jul, 2019 06:21 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Die Position der mobilen Navigation lässt sich über die CSS-Klasse .main-navigation-mobile-open steuern. Mit dem gewünschten Media-Query können Sie damit die Position mit den Eigenschaften top und left festlegen.

  2. 2 Posted by Karl-Ludwig Gro... on 31 Jul, 2019 06:36 AM

    Karl-Ludwig Grosch's Avatar

    Hallo & Guten Morgen,

    vielen Dank für Ihre rasche Antwort, leider weiß ich damit nicht so recht
    etwas anzufangen.
    Was soll ich tun?

  3. Support Staff 3 Posted by RockSolid Theme... on 31 Jul, 2019 11:09 AM

    RockSolid Themes's Avatar

    Der CSS-Code dafür kann z. B. folgendermaßen aussehen:

    @media screen and (min-width: 600px) and (max-width: 900px) {
        .main-navigation-mobile-open {
            top: 150px;
            right: 20px;
            left: auto;
        } 
    }
    

    Für weitere Individualisierungen beachten Sie bitte auch unser Anpassungs-Tutorial: https://rocksolidthemes.com/de/contao/support/tutorials/elemente-anpassen-3

  4. 4 Posted by Karl-Ludwig Gro... on 31 Jul, 2019 11:38 AM

    Karl-Ludwig Grosch's Avatar

    Vielen Dank, dass Sie mir freundlicherweise den Code erstellt haben.
    Habe diesen in customs.css eingebunden.

    Im Hochformat ist der Hamburger nun auf der rechten Seite, super!
    Im Querformat kommt aber wieder die horizontale Navi.
    Außerdem bleibt der Hamburger im Hochformat nicht, wie er soll, mit dem
    Logo stehen. Damit das Menu beim
    Scrollen immer sichtbar ist.

    Können Sie mir bitte die nötigen Codezeilen zukommen lassen?

    Ganz herzlichen Dank!

  5. Support Staff 5 Posted by RockSolid Theme... on 01 Aug, 2019 07:11 AM

    RockSolid Themes's Avatar

    Ihre Frage betrifft eine individuelle Anpassung. In unseren Support-Richtlinien weisen wir darauf hin, dass wir leider keine Hilfe bei Umbauten leisten können. Dennoch versuchen wir Ihnen, in diesem Fall, im Rahmen unserer Möglichkeiten weiterzuhelfen:

    Ergänzen Sie dafür bitte die Angabe position: fixed; im oben angeführten CSS-Code:

    @media screen and (min-width: 600px) and (max-width: 900px) {
        .main-navigation-mobile-open {
            top: 150px;
            right: 20px;
            left: auto;
            position: fixed;
        } 
    }
    
  6. 6 Posted by Karl-Ludwig Gro... on 01 Aug, 2019 01:27 PM

    Karl-Ludwig Grosch's Avatar

    Ich bedanke mich ganz herzlich bei Ihnen für Ihr freundliches
    Entgegenkommen. Habe den Code so eingebunden und, supi, es tut wie
    gewünscht.

    DAnkeschön und einen schönen Tag!
    Mit freundlichen Grüßen

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • Image-1.jpg 332 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac