Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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 upRelated 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up