Join Jen Kramer for an in-depth discussion in this video Solution: Combine Top Bar with Off Canvas, part of Up and Running with Foundation 5.
- View Offline
- Exercise Files
…So how'd you do on this challenge?…Did you find a way to combine the top bar navigation with the off-canvas navigation?…If you did, it should looks something like this.…Here at the large resolution you should see the navigation going…across the top of the page like this with your drop-down menu.…As you start to shrink the page down,…you'll see your various changes to the medium resolution.…And then where you would normally expect this break point…here, where the top bar would normally go to your hamburger…button with the word Menu over here on the right,…instead we're going to a button over here on the left.…
And when you click the button over here on…the left, you wind up with the off-canvas style navigation.…How cool is that?…I think that's pretty awesome.…So, if you take a look at the code, let's see how that magic happened.…First of all, we're going to start with the off-canvas navigation, and…that was in your starting HTML file that I gave you.…So, here's all of that off-canvas stuff, starting here at…
- Downloading and installing Foundation 5
- Introducing grids
- Centering columns
- Nesting grids
- Styling text, lists, buttons, panels, and more
- Adding navigation bars and dropdown menus
- Creating a responsive lightbox
- Adding an image carousel
- Integrating responsive images
- Adding tooltips
Skill Level Beginner
CSS: Transitions and Transformswith Joseph Lowery2h 25m Intermediate
1. Overview of Foundation 5
2. The Grid System in Foundation
3. CSS Overview
4. Navigation Systems
Next steps1m 24s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.