Home → Contao →

Verwendung: Mobile Navigation für Tablets

• Edit

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

   

   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.

   • Edit

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

   

   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

   • Unbenannt.JPG 12.5 KB
   • Edit

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

   

   Hat sich erledigt - hatte gerade einen Hänger!

   Gelöst mit

   .main-navigation {
       display:none;
   }
   

   • Edit

4. 4 Posted by Gerald Helminge... on 10 Aug, 2017 01:34 PM

   

   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!

   • Edit

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

   

   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;
       }
   }
   

   • Edit

6. 6 Posted by Christian on 21 Jul, 2018 03:16 PM

   

   Hallo,

   nichts von dem Zeigt mir eine andere Mobile Navi an.
   Gibt es irgendwo eine genau Schritt für Schritt Anleitung ?
   Nutze Contao 4.5 und habe auch die Erweiterung dropdown installiert, aber wo finde ich das dann im BE?

   Gruß

   • Edit

7. Support Staff 7 Posted by RockSolid Theme... on 23 Jul, 2018 06:00 AM

   

   Vielen Dank für Ihre Frage.

   nichts von dem Zeigt mir eine andere Mobile Navi an.

   In diesem Beitrag ist beschrieben wie sich die mobile Navigation auch auf Tablets anzeigen lässt. Die mobile Navigation selbst ändert sich dadurch nicht.

   Wenn Sie etwas an der mobilen Navigation ändern möchten, beschreiben Sie bitte in einem neuen Ticket Ihren Anwendungsfall: https://my.rocksolidthemes.com/support

   • Edit

8. 8 Posted by Christian B on 27 Jul, 2018 10:58 PM

   

   Hallo,

   Vielen Dank für ihre Rückmeldung.

   In welchem Beitrag steht es??
   Wie bekomme ich die Sichtbar ?!

   Mfg
   Christian

   • Edit

9. Support Staff 9 Posted by RockSolid Theme... on 30 Jul, 2018 06:21 AM

   

   In folgender Antwort ist beschrieben wie sich die mobile Navigation auch auf Tablets anzeigen lässt: http://help.rocksolidthemes.com/discussions/contao/11684#comment_37522788

   • Edit

10. 10 Posted by Christian B on 30 Jul, 2018 10:22 AM

    

    Sehr geehrtes Team,

    Diese Information reicht leider nicht aus.
    Siehe [Link entfernt]

    LG
    Chriss

    • Edit

11. Support Staff 11 Posted by RockSolid Theme... on 31 Jul, 2018 05:20 AM

    

    Bei Ihrer Seite handelt es sich nicht um das Tao-Theme das in diesem Beitrag behandelt wird. Bitte erstellen Sie ein neues Ticket über https://my.rocksolidthemes.com/support

    • Edit

12. 12 Posted by Christian B on 31 Jul, 2018 10:38 AM

    

    // Leider führt dieser Link ins Nichts

    • Edit

13. 13 Posted by Thomas Ritz on 23 Jun, 2023 08:23 AM

    

    Hallo
    Arbeite mich eben in TAO ein :-)
    Für die responsive Darstellung des Headers für Tablets (Hamburger-Menu) habe ich die oben genannten CSS-Styles in die custom.css kopiert:

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

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

    Das Resultat sieht nicht erwartungsgemäss aus > Mobile_1.jpg)
    Ich möchte dass es so aussieht wie > Mobile_2.jpg
    Beim Handy wäre es besser den Hamburger rechts zu haben > Mobile_3.jpg

    Wie bekomme ich das hin?
    LG
    Thomas

    • Mobile_1.jpg 72.6 KB
    • Mobile_2.jpg 52.8 KB
    • Mobile_3.jpg 29.2 KB
    • Edit

14. Support Staff 14 Posted by RockSolid Theme... on 23 Jun, 2023 09:50 AM

    

    Vielen Dank für Ihre Frage.

    Die gewünschte Darstellung sollte sich mit folgendem CSS-Code realisieren lassen:

    @media screen and (max-width: 900px) {
        .main-navigation-mobile-open {
            display: block;
            top: 130px;
            right: 250px;
            left: auto;
        } 
        .main-navigation-mobile.is-enabled {
            display: block;
        }
        .main-navigation {
            display:none;
        }
        .main-navigation-search {
            bottom: 30px;
        }
    }
    @media screen and (max-width: 599px) {
        .main-navigation-mobile-open {
            top: 42px;
            right: 25px;
        } 
    }
    

    • Edit

15. 15 Posted by Thomas Ritz on 24 Jun, 2023 06:16 AM

    

    Vielen Dank, es sieht schon besser aus :-)
    Seltsamerweise steht «Kundenservice» nicht neben der Mailadresse, sondern unten rechts. > Nav_0

    Die Social-Icons können ausgeblendet werden, dann hätte es Platz.
    Zudem sollte das Suchfeld geschlossen sein. > Nav_1

    Und noch besser wäre das Hamburgermenu ganz rechts, da es vom ausfahrenden Suchfeld überdeckt würde.> Nav_3

    Danke für Eure Hilfe
    LG Thomas

    • Nav_0.jpg 69.4 KB
    • Nav_1.jpg 53.4 KB
    • Nav_2.jpg 61.2 KB
    • Edit

16. Support Staff 16 Posted by RockSolid Theme... on 26 Jun, 2023 02:15 PM

    

    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:

    Die gewünschte Darstellung sollte sich mit folgendem CSS-Code realisieren lassen:

    @media screen and (max-width: 900px) {
        .main-navigation-mobile-open {
            display: block;
            top: 90px;
            right: 25px;
            left: auto;
        } 
        .main-navigation-mobile.is-enabled {
            display: block;
        }
        .main-navigation {
            display:none;
        }
        .main-navigation-search {
            bottom: 30px;
            right: 85px;
            border:0;
        }
        .main-navigation-search input {
            margin-left: -10.35714em;
            border-color: transparent;
        }
        .header-links {
            float: left;
        }
        .header-links.-secondary {
            display: none;
        }
    }
    @media screen and (max-width: 599px) {
        .main-navigation-mobile-open {
            top: 42px;
            right: 25px;
        } 
    }
    

    • Edit