Join Jen Kramer for an in-depth discussion in this video Formatting the top nav bar, part of Learning Foundation 4.
Now that we've got the breadcrumbs and the side nav all styled-up and in place, …the next thing I want to work on is formatting the top Navigation bar. …Into a black bar that's going to stretch all the way across the page. …We want to make it responsive, so that as the page gets narrower, the navigation's …going to collapse behind a button that will reveal the navigation when clicked. …And I'll show you an example of what I mean. …Inside of the browser here, this is the Foundation documentation website, at …foundation.zurb.com/docs, you see the black bar going across the very top of …the screen. That's the Navigation bar we're going to …try to build. As I start to make the page narrower.…
You'll see how nicely its collapsing. Little bit by little bit until we hit our …break point. And at our break point, the navigation is …completely hidden, and what we have instead is this icon here that says menu. …When you click that then you have a drop down that will show you all of the …navigation that is appearing on the rest of the website. …
- What is Foundation?
- Exploring the grid system
- Working with lists
- Styling buttons, thumbnail images, and more
- Including flexible video
- Adding breadcrumbs to the navigation
- Working with Clearing, the responsive lightbox
- Creating accordion panels and tabs for in-page navigation
Skill Level Beginner
1. Foundation Introduction and Download
2. The Grid System in Foundation
3. CSS Overview
4. Navigation Systems
Next steps2m 12s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.