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