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.

Hide the navigation area off canvas

Hide the navigation area off canvas - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Hide the navigation area off canvas

“

- [Instructor] The next step is to grab the entire navigation area plus this menu button here and shift it to the left so it shifts off-canvas. And we can do this by simply changing the left position of these items because they're relatively positioned inside the grid. And that means if we shift them to the left, it doesn't expand the width of the available content in the viewport, so we don't get left and right scrolling. Let me show you what I mean. If I go into the main-nav rule here and simply say left: -13em and click save, you'll see this nav area shift over to the lefthand side, still a little bit of it peeking out because there's some padding on this element. That's why we can shift it to 13 to the left even though it's only 12 ems wide. But the important thing is, we don't have horizontal scroll bars. So this is literally shifted off-canvas without changing the width of the grid at all. We're relatively positioning it away from its original position without changing the grid.…

Contents