From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Position the navigation area on the grid

Position the navigation area on the grid - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

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…

Contents