From the course: CSS: Advanced Layouts with Grid
Unlock the full course today
Join today to access over 23,200 courses taught by industry experts.
Position the navigation area on the grid - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Position the navigation area on the grid
- [Instructor] Now comes the fun part. We're going to take this nav section down here at the bottom and pull it out and place it on top of the other content on the left-hand side here. In the past, this would require absolute positioning, and a bunch of CSS magic, but now that we're using CSS Grid, it is totally straightforward. As you know, once you've defined a grid, you can take any grid item and place it anywhere you want in the grid. And in this case, we're going to take the nav grid item, place it in the first column, and make it span across all the available rows. Just to make it easier for you to follow along, I'll place my browser on the right and the code editor on the left. The item we're targeting is this section here with the class main-nav. And inside this section we have a button with a class trigger that's currently hidden with CSS. As well as a nav that has the actual menu. This nav ul here is currently using flexbox to align the items horizontally and that will come…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
(Locked)
Different off-screen navigation options2m 7s
-
(Locked)
Off-screen to cover navigation overview2m 43s
-
(Locked)
Set up the main grid3m 36s
-
(Locked)
Position the navigation area on the grid4m 15s
-
(Locked)
Hide the navigation area off canvas1m 50s
-
(Locked)
Create a reveal effect using JavaScript3m 45s
-
(Locked)
Improve accessibility of off-screen navigation3m
-
(Locked)
Overview of sliding navigation panel1m 15s
-
(Locked)
Create an overflowing grid3m 30s
-
(Locked)
Slide content in and out of the canvas4m 7s
-
(Locked)
Bonus: Animate the sliding effect6m 53s
-
(Locked)
-
-