Building the Responsive Navigation2: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
You need to sign up for Treehouse in order to download course files.Sign up