Contao 3.0 Responsive Layout Navigation ändern

[Truller500]

Hallo,

wie ändere ich die Navigation für die Breite @767?
a) Z.B. von Navigationsmenü zu Quicknavigation?
b) oder auch per CSS?

[jubel]

Hallo,

Ich habe zwar selber noch nicht viel in dieser Richtung probiert, aber wenn man sich die Onlinedemo anschaut, dann sieht man dort immer zwei Seitenlayouts (eins davon mit dem Zusatz mobile), d.h. Du kannst über diesen Weg auch verschiedene Module und ggf. Stylesheets einbinden.

[BugBuster]

das ginge auch nur per css, die Frage ist ob man das so will.
Beide Navigationen anlegen und per css nur eine von beiden anzeigen.
Problem: Browser die CSS3 nicht können verstehen die media queries nicht, die sehen dann beides, sofern das über media queries gesteuert wird.

Daher vielleicht doch besser das über 2 Layouts zu machen.

[Truller500]

für die Tipps.

Also ich hab es nun doch so hinbekommen wie ich es mir wünsche:
Ich verwende das in Contao 3 enthaltene Responsive Grid. Da ist ja eigentlich schon alles drin was muss.
Die Navigation passe ich dann z.B. so an:
Ich lege ein zusätzliches CSS für mein Theme an
@media(max-width:767px)
{
.mod_navigation {font:2em}
.mod_navigation ul{font-family:Tahoma,Geneva,sans-serif;list-style-type:none}
…usw.
}
Schön zu überprüfen was passiert: Bowserfenster zusammenschieben, im Webdeveloper lassen sich auch responsive Layouts schön anzeigen.
Meine Tests im iPad und iPhone waren demzufolge auch erfolgreich.

[Nina]

Beachtet bitte auch meine Tipps zum anpassen von #right und #left an das Responsive Design vom Layoutbuilder-CSS / Grid-CSS von Contao

[Truller500]

...vielen Dank für den Hinweis.

[elmuerto]

Hi!

aber wenn man sich die Onlinedemo anschaut

Diese Demo würd mich auch interessieren wo ist die denn?

[JanoschSkuplik]

Hi!

Diese Demo würd mich auch interessieren wo ist die denn?

Ich nehme mal an, dass diese Demo gemeint ist: http://demo.contao.org/

Allerdings arbeitet diese mit unterschiedlichen Seitenlayouts (Desktop vs. Mobile) und nicht responsive im Sinne von der Verwendung von MediaQueries. Einfach mal mit einem Smartphone und einem Desktop-Browser ansurfen.