Verwendung: Mobile Navigation für Tablets

Christian's Avatar

Christian

30 Jul, 2015 11:53 AM

Produkt: Tao Contao

Hallo Rocksolid-Team,

gibt es eine elegante Methode, um die mobile Navigation für Tablets zu aktivieren? Ist das vorgesehen?

Gruß und Dank!

  1. Support Staff 1 Posted by RockSolid Theme... on 30 Jul, 2015 12:07 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Die mobile Navigation wird über Media-Queries im CSS gesteuert. Fügen Sie bitte folgenden CSS-Code in die Datei files/tao/css/custom.css ein um die mobile Navigation bereits in der Tablet-Größe anzuzeigen:

    @media screen and (max-width: 900px) {
      .main-navigation-mobile-open {
        display: block;
      } 
      .main-navigation-mobile.is-enabled {
        display: block;
      }
    }
    

    Bitte beachten Sie, dass eventuell weitere Anpassungen nötig sein können um die gewünschte Darstellung zu erreichen.

  2. 2 Posted by jens.betsch on 18 Feb, 2016 01:27 PM

    jens.betsch's Avatar

    Hallo zusammen,

    bei mir wird zwar die mobile Navigation angezeigt. Allerdings wird die die Hauptnavigation auch noch angezeigt. Wie kann ich diese noch ausblenden?

    Viele Grüße

  3. 3 Posted by jens.betsch on 18 Feb, 2016 01:30 PM

    jens.betsch's Avatar

    Hat sich erledigt - hatte gerade einen Hänger!

    Gelöst mit

    .main-navigation {
        display:none;
    }
    
  4. 4 Posted by Gerald Helminge... on 10 Aug, 2017 01:34 PM

    Gerald Helminger's Avatar

    Danke für diese Lösung. Die soweit wunderbar funktioniert. Allerdings erscheint die Mobile Navi bei mir in der div.header-bar und ist somit kaum zu sehen. In der Standard Variante von Tao verschwindet bei kleineren Auflösungen/mobilen Endgeräten die header-bar ja vollständig. Könnten Sie bitte noch ein Feedback geben, wie die Header Bar im Zusammenspiel mit der oben genannten Modifikation verändert werden muss, um das "normale" Verhalten der header-bar (verschwindet) zu erzwingen? Danke!

  5. Support Staff 5 Posted by RockSolid Theme... on 11 Aug, 2017 08:48 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Dafür können Sie folgenden CSS-Code verwenden:

    @media screen and (max-width: 599px) {
        .header-bar {
            display: none;
        }
    }
    

Reply to this discussion

Internal reply

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

Attaching KB article:

»

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