🤑 Join the Treehouse affiliate program and earn 25% commission!

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

Curious which AI tools Treehouse developers love? ⚙️ Check them out!

🫡 Treehouse for Military offers discounts to Veterans, service members and their families!

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Build a Responsive Navigation with Flexbox

22:23 with Guil Hernandez

Learn how to build a responsive website navigation, using CSS media queries and flexbox layout.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Code Snippets

Giving .main-header a justify-content: space-between; declaration will also align the logo to the left side of the header while pushing the nav to the right.

With this method, there's no need to target .site-logo and declare margin-right: auto;.

@media (min-width: 1025px) {
  .main-header {
    flex-direction: row;
    justify-content: space-between;
  }
...

Quick Reference

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

[SOUND] Hey everyone, Guil here. 0:00

In this workshop, I'm gonna teach you how to build a simple, 0:06

responsive website navigation using CSS media queries and Flexbox. 0:10

So, the navigation is one of the most important parts of a website, 0:14

because it helps users find what they want and 0:17

direct them to areas of your site they might not know about. 0:20

Now, most of the time a website's navigation won't look or 0:24

work the same way in all viewport sizes and devices. 0:27

So, as web designers, we need to design a navigation that serves the users need 0:31

according to their screen size, or the device they're using. 0:36

So, before we begin coding, let's take a look at what we're going to build. 0:40

So this is the navigation for a UI toolkit called Poly. 0:44

The navigation here in the header consists of a nice logo graphic, and 0:48

the main navigation menu. 0:53

Now on narrow view port sizes in mobile devices, the logo and 0:55

navigation are displayed in one column, as we could see here. 1:00

Then, in wider view ports and 1:04

devices, the navigation scales up to a wider horizontal layout. 1:06

And, in the widest range, 1:10

the navigation is positioned over to the right side of the page. 1:12

So, it's on the same line as the logo. 1:15

So, I'm gonna build this navigation using the Flexbox CSS layout feature, and 1:17

a mobile first approach. 1:22

So if you haven't watched our videos on Flexbox layout, 1:24

I recommend watching the Flexbox videos posted in the teachers notes 1:27

before continuing with this workshop. 1:31

Now there are many different ways to build a responsive navigation like this one. 1:33

So, I'm gonna show you one method. 1:38

Over in my project files, I have an HTML file, and in it some content. 1:41

So here I have a headline and right below a paragraph. 1:46

And this index.html file is linked to two style sheets. 1:50

Here we have base.css, and nav.css. 1:56

Now base.css contains all the base styles for my page. 2:00

So I'm going to write the CSS for the responsive navigation inside nav.css. 2:05

So over in my HTML file, I want to build my navigation inside a header. 2:11

So, inside this inner div, and inside the comment tags for 2:18

header, I'm going to nest a header element. 2:24

And I'm going to give it the class main-header. 2:28

So next, inside my main-header element, I'll add the site's logo. 2:37

So, the logo should link to the website's homepage, so I'm going to nest my logo 2:43

inside an anchor element, so I'm going to create an anchor element. 2:49

Add an href attribute and I'm going to give it the class site-Logo. 2:55

So next I want to embed the Poly logo as an SVG image. 3:06

Now embedding an SVG is just like embedding a regular image. 3:12

So I'm going to add an image tag, and as the source value, 3:16

I'm going to define this logo.svg file located inside this image directory. 3:21

So, I'll say image/logo.svg, and 3:28

then I'll add an all attribute, and I'll set the value to Poly- UI Toolkit. 3:32

All right. So below the anchor element, 3:41

I am going to create the markup for the navigation menu. 3:45

So to build the menu, I am going to use an unordered list and give it the class nav. 3:48

And inside my nav ul element, 3:57

I'll nest the six list items that will contain the navigation links. 3:59

So, let me nest the first one. 4:05

So, say, li and then in here, I'm going to nest an anchor element or the nav links. 4:07

And let's make the first one Typography. 4:14

So what I'll do now is copy this first list item, and paste it below five times. 4:18

So now I'll go back up to my second link, and change it to say Button. 4:25

Let's make the third one say Form. 4:32

The next one will be Images. 4:36

Then we'll do Grid, and finally, Navigation. 4:40

All right, so let's save our index file and take a look at what we have so far, 4:43

so when I click the Preview button, and view my navigation in the browser, 4:48

we can see how we have the really big Poly logo up top, 4:52

then right below we have the six navigation links. 4:57

So now, let's begin styling the navigation with CSS. 5:00

I'm gonna use a mobile-first approach to style the navigation. 5:03

When we use a mobile-first approach, we serve the basic layout styles in 5:08

the minimal amount of code to style a page for small, mobile device. 5:12

Then at certain break points, we gradually adjust the layout with media queries, for 5:18

wider screens and devices. 5:22

So in other words, a mobile first approach means that I will define the common styles 5:24

with a header, logo, and navigation links before adding any media queries. 5:28

In my nav.css styles, I'm going to add all my comment styles first, 5:33

right here under the Main Styles comment flag. 5:38

First I'm going to target the class .main-header, and 5:42

I'm going to give the main header some top padding, so 5:46

let me add a padding-top property, and set the value to 2em. 5:49

Next, I want to style the logo. 5:55

So, I'll target the class site-logo, and I wanna set its width. 5:57

So, I'll add a width property and set it to 110px. 6:03

All right, so now, I'm going to target my nav element. 6:09

And I'm going to give it some top margin. 6:14

So I'll add a margin-top property, and I'll set the value to 1.5em. 6:16

Next, I'm going to target and style the navigation links inside my nav here. 6:23

So to do that, I'm going to target nav, then its descendant anchor elements, 6:29

and I want to display them block, so 6:35

I'll add a display property, set the value to block, and let's set the colors. 6:38

I'll add a color property, #797e83, 6:43

which gives us a shade of grey. 6:47

Let's add a font-size property. 6:53

So let's say font size, and I'm going to set it to 1.125em. 6:55

And then I'll add a font weight property below that. 7:02

We'll say font weight 300. 7:05

And I want to align the text to center, so I'll add a text to line property. 7:09

And, set the value to center, and a couple more. 7:14

Let's give it some padding. 7:17

So, I'll add a padding property and set the value to .4em. 7:18

And finally, I want to give it a bottom border. 7:23

So, I'll add a border-bottom property and set the value to 1px 7:27

solid, and I'll make the color #ebecec. 7:33

So, next, I want to target my nav links on hover. 7:38

So, right below this rule, 7:44

I'll create a new rule that targets the links inside nav on hover. 7:46

And, I want to change the color. 7:51

So, I'll add a color property and I'll make the value # 0b0b0b, 7:53

which gives us that darker shade of black. 7:59

Then I want to change the bottom border color. 8:03

So I'll say border-bottom-color, and 8:05

I'll change the value to #52bab3, 8:09

which gives us this shade of aqua. 8:14

All right so let's take a look at what we have so far. 8:18

I'll save my stop sheet and go back to the preview and refresh. 8:21

And as we can see nothing too special up to this point. 8:25

So far we have a nice site navigation that's functional 8:29

in all viewport sizes and devices. 8:33

But it can be presented better. 8:36

So we can optimize the navigation experience for 8:37

users according to their device width, or view port size, so lets do that next. 8:40

Instead of using floats or inline block display, 8:46

I'm going to lay out the navigation using Flexbox. 8:48

So, Flexbox is a CSS layout mode that is source ordered and dependent. 8:52

That means that we can change the direction and order of a set of elements 8:57

like the list items here in the navigation regardless of their order in the HTML. 9:02

So, for example I can make the last list item in the list 9:07

appear first in the navigation, or even second, third or fourth. 9:11

This makes flex box a great tool for building a responsive site navigation. 9:15

So, the first step in creating a Flexbox layout is to define a flex container. 9:21

Now a flex container is the HTML element 9:25

that contains the other elements being laid out with flex box. 9:28

And it establishes a flex formatting context. 9:32

So for example, the nav ul element here contains these 9:35

list item elements used for the navigation links. 9:41

So the ul element will be a flex container. 9:44

Now I wanna designate two flex containers in my navigation. 9:47

So the flex containers will be main-header and nav. 9:51

So, back in nav.css right above the main header rule, 9:57

below the main styles comment flag. 10:01

I'm going to once again target the main header class and 10:05

the nav class in the same rule. 10:09

Now the reason I'm creating two flex containers for 10:13

both main header, and nav is because the Flexbox formatting 10:16

context itself does not get inherited by child elements. 10:20

Now, since I also want to layout the list items here, inside nav. 10:25

With Flexbox, I also need to establish a Flexbox context inside nav. 10:31

So, back at my style sheet, inside the .main-header and 10:37

.nav rule, I'm going to add a display property, set the value to flex. 10:41

So now we have flex spots happening in our layout. 10:45

So that means that the elements inside .main-header and 10:49

.nav can be laid out vertically, horizontally, and 10:53

have flexible dimensions, to adapt to the display space. 10:56

So, if you've worked with Flexbox, you know that flex items, 11:00

by default, are laid out in a horizontal direction. 11:03

So, If I save my style sheet and refresh our preview, 11:07

we can see that the header and nav are now laid out in the same row. 11:11

So, I wanna change this to a column layout instead. 11:16

That direction can be changed with the flex direction properties. 11:20

So inside my main header and nav rule, I'm going to add the property flex direction. 11:24

And set the value to column. 11:31

So when I do that, notice how the header and 11:34

navigation are now laid out in a column, instead of in a horizontal row. 11:37

But notice how the logo is flush with the left margin of the container. 11:43

So I want to center the logo inside the header. 11:48

To do that, I can use the align self flex box properties. 11:52

So back in my style sheet, I'll scroll down to the site logo rule. 11:55

And I will add the property align-self, and set the value to center. 12:01

So now when we take a look at it again, 12:07

notice how the logo is now horizontally centered inside the header. 12:09

Next, I'm going to write the CSS that will lay out the navigation 12:14

in a wider viewport and device range. 12:18

So, back in my nav.css file. 12:20

I'll scroll all the way down to the media queries section here. 12:24

And I'm going to create a media query break point, that will style the main 12:27

header and navigation when the view port or device is at 769 pixels or wider. 12:32

So I'll write @media. 12:38

And I'll use the min width media feature. 12:42

And I'll set it to 769 pixels. 12:45

So when the view port or device is 769 pixels or 12:49

wider, I'm going to target main header 12:54

and set the height to 200 pixels. 13:01

And then site logo will be a little wider. 13:05

So, let's target site logo inside the media query and 13:08

set the width to 140 pixels. 13:13

I also wanna give the nav element some top-margin, 13:18

just to give it some separation from the site-logo. 13:21

So let's target nav and give it a margin top value of 3em. 13:25

And finally, I'm going to target the anchor elements and side nav. 13:33

And I'm going to change their bottom border color. 13:38

So I'm going to say. 13:42

Border bottom color. 13:44

And I'll set the value to transparent. 13:48

Now I'm setting the navigation links bottom border color to transparent, 13:50

to remove this light grey border. 13:54

Because at this wider break point, 13:57

we only want to see these link border colors on hover only. 13:59

So, when we save our style sheet, and take a look at our navigation in the browser, 14:04

notice how once the view port is at 769 pixels wide, 14:10

the navigation links are still laid out in a column. 14:15

So, at this width here, I want to lay them out horizontally, in a single row. 14:18

So, to lay them out as a row, I'm going to go back to my style sheet. 14:23

And, I'm going to give nav a flex-direction property. 14:28

And, I'm going to set the value to row. 14:33

So, in the nav rule, I'll add the flex-direction property and 14:36

the value would be row. 14:41

So, let's take a look. 14:42

I'll save the style sheet and when we refresh. 14:43

Great the navigation is now laid out horizontally. 14:47

So now I want the navigation to span the full width of it's flex container. 14:51

And I want all the links to be evenly spaced out, 14:56

instead of being all bunched up here on the left side of the header. 14:59

So, flex boxes justify lets you 15:03

define how space should be used and distributed in a flex container. 15:07

So, back in my style sheet, inside the navrule and 15:12

the media query, I'm going to add the justify content property. 15:16

And I'm going to set the value to space between, 15:21

so when we save our style sheet and take a look at it again. 15:27

We can see how the value space between, 15:30

evenly distributes the navigation items in a row. 15:34

So the first item is at the start of the row, and 15:37

the last item is at the end of the row. 15:40

And any space in-between is evenly distributed. 15:44

See, this is a great feature for creating responsive layouts. 15:49

Because the navigation item adjust the size of the view port automatically. 15:52

Really neat! 15:57

Next, I also want to add a justify content property to my main header. 15:59

So back on my style sheet, I'll scroll up to the main header rule. 16:04

Inside the media query, and I'll add the property justify content. 16:08

This time I'm going to set the value to flex end. 16:14

So when we save our style sheet and go back to the browser, what the flex end 16:18

property does is, it places main header at the end or bottom of the column. 16:23

That's 200 pixels tall. 16:30

So now, we have more separation between the logo and the top of the page. 16:32

So, next, I'm going to go back to my style sheet and create one more media query 16:37

that will target my layout when the view port or device is 10, 25 pixels, or wider. 16:43

So, I'll say, @media. 16:48

Min-width, 1025 pixels. 16:52

So in this wide viewport range, I want to take advantage of the extra horizontal 16:57

space, and position both the logo and navigation on the same line. 17:02

Now currently, the main headers flex direction is set to column, 17:07

so that's why we're seeing the logo and the navigation menu on separate lines. 17:13

So, if I go back to my new media query, and 17:19

target main-header and set its flex-direction to row. 17:22

So, I'm going to add a flex-direction property and set it to row. 17:29

When we save and take a look at it again, we can see how the logo and 17:33

navigation are now placed on the same line. 17:38

Pretty neat. 17:41

So now, I want to move the logo over to the left side of the header, and 17:42

I want the navigation menu to be on the right side. 17:46

Margins have a significant effect on flex items. 17:50

Particularly, the value auto. 17:53

So a margin set to auto, will absorb any extra space 17:56

around a flex item, and push other flex items into different positions. 18:01

So let me show you, back in my style sheet, inside my second media query, 18:06

I'm going to target the class .site-logo. 18:12

And I'm going to give it a margin-right property. 18:17

And, set the value to auto. 18:21

So, when we take a look at it again, 18:23

we can see how the logo is now flush with the left margin of the container. 18:25

And, the navigation menu is perfectly placed on the right side. 18:31

Now, since the logo's right margin is set to auto, the browser automatically inserts 18:35

any extra space between the logo and the navigation, to the right of the logo. 18:41

So this is a really cool feature of Flexbox, and it makes it very easy to left 18:46

justify one Flexbox item while right justifying other Flex items. 18:51

Next, let's adjust some of the layout here, in the navigation. 18:56

So, I'll go back to my style sheet and 19:00

I want to remove the top margin in the navigation. 19:01

So, I'll target the class nav, and 19:05

I'll do that by setting the margin-top value to zero. 19:09

So, that extra space is not necessary, 19:15

since the logo is no longer positioned above the nav, it's now on the same line. 19:18

So next I want to give the navigation list items here, a left and 19:23

right margin, and that will give them some separation, so 19:28

right below this .nav rule, I'm going to target Nav l i. 19:31

And then I'm going to add a margin, left property. 19:36

And I'll set the value to 0.65em. 19:40

And below that I'll add a margin right property. 19:43

The value will also be 0.65em. 19:48

Finally, I also want to position 19:51

the navigation in the vertical center of the header. 19:53

So I want it perfectly centered vertically in the header. 19:56

So, instead of using margins to do that, 19:59

I'm once again I'm going to use the align self property. 20:01

So, in my nav room here, I'm going to add the property 20:05

align self and I'm going to set the value to center. 20:09

So, setting the value to center, as we can see when we refresh the page, 20:14

It positions the nav in the vertical center of the header. 20:20

All right, so it looks like we are all done writing our CSS, so 20:22

let us take a look at what we have done so far. 20:27

If I resize the browser, we can see that on narrow viewport sizes and 20:29

mobile devices, great. 20:34

The logo and navigation are displayed in one column, and then in the wider 20:36

viewport range, the navigation scales up to a wider horizontal layout. 20:40

And in the widest range, the navigation is positioned over to the right 20:46

side of the page, so now it's on the same line as the logo. 20:50

Perfect! 20:53

So, now it's time to test our navigation on different devices. 20:56

And we can do that using the Chrome Developer Tools, so the Chrome Dev Tools 20:59

has a device simulation feature that lets us preview and test on different devices. 21:04

So, let's go ahead and open up Dev Tools by clicking the hamburger icon menu here. 21:10

In the top-right corner. 21:14

And then, we'll go over to More Tools and we'll click Developer Tools. 21:16

So, once the Chrome dev's tools panels open, we can click the phone icon, 21:21

here, next to the inspect icon. 21:26

And, this brings up the simulator. 21:29

All right, so, now, we can test it on a few devices. 21:31

So, up here in the device dropdown, 21:33

let us first select iPad, and then as you can see, that looks pretty good. 21:37

Next we will select iPhone 6, which looks great, and 21:43

let us try a few more, say Samsung Galaxy Note, that looks fine. 21:50

And finally, let's try one more. 21:56

So let's say Galaxy S 4. 21:58

Which looks the same. 22:01

It looks good. 22:02

All right, great. 22:03

So now, we have a fully responsive navigation, 22:04

that looks and works great on any view port size or device. 22:07

Nice work. 22:12

So, for more information about Flexbox, mobile-first layout, 22:13

or anything else I've covered in this workshop, 22:17

be sure to check the teacher's notes for additional resources. 22:19

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