Contao Official Demo - Probleme mit mobiler Navigation

Guten Tag zusammen,

ich habe mir das Contao Official Demo Theme installiert. Dabei habe ich Schwierigkeiten mit der mobilen Navigation, nach Umstellung des 2-Spalten-Layout auf Hauptspalte und rechte Spalte, und gleichzeitigem Inhalt in der rechten Spalte. Dazu habe ich zum Testen ein Modul mit "eigenem HTML Code" erstellt, das außer ein paar Buchstaben weiter nicht enthält. Wenn ich dieses Modul nun im Layout von "2 columns" der rechten Spalte hinzufüge, funktioniert die mobile Navigation nicht mehr. Die Menüpunkte werden zwar angezeigt, man kann die Menüpunkte aber nicht anklicken. Um auszuschließen, dass das Problem vor dem PC sitzt und um auszuschließen, dass nicht meine Installation an sich das Problem ist, habe ich das Ganze in der Online-Demo nachgestellt. Aber auch dort zeigt sich das gleiche Verhalten.
Hat jemand eine Erklärung hierfür?


Gruß
Norbert

Hallo Norbert,
ich konnte Dein Problem mit etwas Bastel nachstellen.

Die "rechte Spalte" ist in der Demo garnicht formatiert.

Ich hab es nur kurz durchgeschaut, aber folgendes sollte das Problem sein:

Die Hauptspalte ist im CSS immer auf "flaot: left" gesetzt, ist damit aus dem Fluss genommen. Die rechte Spalte legt sich in diesem Fall für Dich unsichtbar darüber.
Das merkst Du daran, dass Du keine Texte markieren und auch keine Links klicken kannst.

Anschauen kannst Du das, wenn Du eine CSS/SCSS-Datei anlegst und diese im Betreffenden Layout als letzte CSS/SCSS-Datei einbindest.

Nun könntest Du dort folgendes eintragen:

Code:

---


        #right {
            border: 3px solid red;
        }

---

Damit wird die rechte Spalte rot gerahmt und Du siehst, welchen Platz diese einnimmt.

Wenn Du nun das oben genannte CSS wieder entfernst und dies durch folgendes CSS austauscht, sollte dieses Problem erstmal gelöst sein:

Code:

---

        @media (max-width: 767px) {
            #main {
                        float: none !important;
            }
        }

---

Ich habe dies nur rudimentär getestet.
Bei weiteren Fehlern mit der rechten Spalte, einfach wieder hier melden.

Allerdings wirst Du nun trotzdem selbst noch im CSS tätig werden müssen, denn die rechte Spalte klebt ohne Abstand direkt am Rand.

Hallo nmk,
klingt ganz nach position und z-index 'Problemen'. D.h. Der Content überdeckt die Navigation. Kann man mit beliebigen Webdeveloper Tools herausfinden (also in jedem aktuellen Browser per Element untersuchen).
Um mehr zu sagen brauchen wir einen Link zu deiner Testseite.

Viele Grüße

Hallo zusammen,

es war genau so, dass sich die rechte Spalte über die Hauptspalte gelegt hat. Das konnte man mit der von Samuel beschrienen SS/SCSS-Datei oder auch mit einem Webdeveloper Tool (Hinweis von MacKP) sichtbar machen. Ich habe das jetzt wie von Samuel beschrieben gelöst.

Code:

---

@media (max-width: 767px) {
#main {
float: none !important;
}
}

---

Danke für die Hilfe.

Gruß Norbert