Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Modular CSS with Sass

Well done!

You have completed Modular CSS with Sass!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Building the Responsive Navigation

2:01 with Guil Hernandez

Let's quickly go over one of the many ways we can rebuild the main navigation using a mobile-first approach.

So how'd it go? 0:00
Were you able to make the nav responsive to smaller view ports and 0:01
mobile devices like we're seeing here? 0:05
Well, I'm going to quickly go over how I implemented the nav 0:07
using a mobile first approach. 0:10
So, first, I didn't change anything about the markup. 0:12
I left that part alone, as we should. 0:16
But I did change a few things in the placeholder rules. 0:19
So what I did was I renamed the nav item 0:22
display placeholder selector to nav-item horizontal. 0:25
Which, as we can see, contains a medium breakpoint media query. 0:30
That displays the nav items horizontally and applies left and right margins. 0:34
Now, by default, they now appear stacked in the small breakpoint or mobile views. 0:39
So, below our nav item horizontal placeholder, we still have the nav 0:46
item link placeholder, the only difference is I've added a small media query 0:51
break point so that the links get that extra top and 0:57
bottom padding and the light bottom border we're seeing here in the preview. 1:00
So next, I left the nav item on placeholder selector alone, so 1:10
nothing really changes here. 1:15
So, back in the nav module partial, I've separated the three rules here just for 1:17
this example. 1:22
So that I'm able to kinda break this down a little clearer. 1:23
Well, we still have the top and bottom margins defined for a nav class. 1:26
And everything else is still pretty much the same as before, 1:32
except that instead of expanding that nav item display placeholder, 1:35
we're now extending nav item horizontal. 1:40
And that's pretty much it. 1:45
Now, you probably did things a little bit differently, and 1:46
that's okay, since there's no 100% right way of doing this. 1:49
It's just a method I use. 1:54
So, keep up the good work, and 1:56
I'll see you again in the next video where we will wrap things up. 1:57