Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Challenge: Eine horizontale Navigation für breitere Viewports

Challenge: Eine horizontale Navigation für breitere Viewports

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Challenge: Eine horizontale Navigation für breitere Viewports

“

(Musik) Die mobile Navigation ist soweit fertig gestaltet, und Sie sollen in dieser Challenge jetzt um eine horizontale Navigation für breitere Viewports ergänzt werden. Das soll in etwa so aussehen, dass die horizontale Navigation ab circa 600px erscheint. Der Menübutton soll auf jeden Fall versteckt bleiben. Die Navigation bleibt beim Scrollen am oberen Rand des Viewports hängen. Die Menüpunkte sollen gleich groß sein und nicht breiter als 10rem werden. Das CSS, das für die horizontale Navigation benötigt wird, soll in navi-responsiv.css gespeichert werden, gegen Ende unter der Gestaltung der mobilen Navigation. Damit Sie eine kleine Idee vom Außen bekommen, so könnte es aussehen, wenn hier die horizontale Navigation erscheint. Beim Klicken ist eine Active Klasse dabei, und Hovern, und hier sind ein paar senkrechte Striche, ansonsten können Sie die konkrete Ausgestaltung selbst übernehmen. Wichtig ist nur, dass hier diese Bedingungen erfüllt werden. Bis gleich in der Solution.

Inhalt