Bummer! That Track couldn't be located. Perhaps one of the Tracks below is what you're looking for?

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

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.

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up