1 00:00:00,008 --> 00:00:06,362 [SOUND] Hey everyone, Guil here. 2 00:00:06,362 --> 00:00:10,040 In this workshop, I'm gonna teach you how to build a simple, 3 00:00:10,040 --> 00:00:14,500 responsive website navigation using CSS media queries and Flexbox. 4 00:00:14,500 --> 00:00:17,980 So, the navigation is one of the most important parts of a website, 5 00:00:17,980 --> 00:00:20,490 because it helps users find what they want and 6 00:00:20,490 --> 00:00:24,270 direct them to areas of your site they might not know about. 7 00:00:24,270 --> 00:00:27,770 Now, most of the time a website's navigation won't look or 8 00:00:27,770 --> 00:00:31,510 work the same way in all viewport sizes and devices. 9 00:00:31,510 --> 00:00:36,660 So, as web designers, we need to design a navigation that serves the users need 10 00:00:36,660 --> 00:00:40,350 according to their screen size, or the device they're using. 11 00:00:40,350 --> 00:00:44,590 So, before we begin coding, let's take a look at what we're going to build. 12 00:00:44,590 --> 00:00:48,690 So this is the navigation for a UI toolkit called Poly. 13 00:00:48,690 --> 00:00:53,330 The navigation here in the header consists of a nice logo graphic, and 14 00:00:53,330 --> 00:00:55,700 the main navigation menu. 15 00:00:55,700 --> 00:01:00,110 Now on narrow view port sizes in mobile devices, the logo and 16 00:01:00,110 --> 00:01:04,520 navigation are displayed in one column, as we could see here. 17 00:01:04,520 --> 00:01:06,180 Then, in wider view ports and 18 00:01:06,180 --> 00:01:10,720 devices, the navigation scales up to a wider horizontal layout. 19 00:01:10,720 --> 00:01:12,310 And, in the widest range, 20 00:01:12,310 --> 00:01:15,380 the navigation is positioned over to the right side of the page. 21 00:01:15,380 --> 00:01:17,890 So, it's on the same line as the logo. 22 00:01:17,890 --> 00:01:22,500 So, I'm gonna build this navigation using the Flexbox CSS layout feature, and 23 00:01:22,500 --> 00:01:24,350 a mobile first approach. 24 00:01:24,350 --> 00:01:27,620 So if you haven't watched our videos on Flexbox layout, 25 00:01:27,620 --> 00:01:31,460 I recommend watching the Flexbox videos posted in the teachers notes 26 00:01:31,460 --> 00:01:33,760 before continuing with this workshop. 27 00:01:33,760 --> 00:01:38,350 Now there are many different ways to build a responsive navigation like this one. 28 00:01:38,350 --> 00:01:41,090 So, I'm gonna show you one method. 29 00:01:41,090 --> 00:01:46,090 Over in my project files, I have an HTML file, and in it some content. 30 00:01:46,090 --> 00:01:50,733 So here I have a headline and right below a paragraph. 31 00:01:50,733 --> 00:01:56,295 And this index.html file is linked to two style sheets. 32 00:01:56,295 --> 00:02:00,094 Here we have base.css, and nav.css. 33 00:02:00,094 --> 00:02:05,155 Now base.css contains all the base styles for my page. 34 00:02:05,155 --> 00:02:11,642 So I'm going to write the CSS for the responsive navigation inside nav.css. 35 00:02:11,642 --> 00:02:18,320 So over in my HTML file, I want to build my navigation inside a header. 36 00:02:18,320 --> 00:02:24,280 So, inside this inner div, and inside the comment tags for 37 00:02:24,280 --> 00:02:28,710 header, I'm going to nest a header element. 38 00:02:28,710 --> 00:02:31,548 And I'm going to give it the class main-header. 39 00:02:37,327 --> 00:02:43,900 So next, inside my main-header element, I'll add the site's logo. 40 00:02:43,900 --> 00:02:49,450 So, the logo should link to the website's homepage, so I'm going to nest my logo 41 00:02:49,450 --> 00:02:53,340 inside an anchor element, so I'm going to create an anchor element. 42 00:02:55,240 --> 00:03:01,342 Add an href attribute and I'm going to give it the class site-Logo. 43 00:03:06,658 --> 00:03:12,450 So next I want to embed the Poly logo as an SVG image. 44 00:03:12,450 --> 00:03:16,350 Now embedding an SVG is just like embedding a regular image. 45 00:03:16,350 --> 00:03:21,880 So I'm going to add an image tag, and as the source value, 46 00:03:21,880 --> 00:03:28,100 I'm going to define this logo.svg file located inside this image directory. 47 00:03:28,100 --> 00:03:32,533 So, I'll say image/logo.svg, and 48 00:03:32,533 --> 00:03:38,740 then I'll add an all attribute, and I'll set the value to Poly- UI Toolkit. 49 00:03:41,930 --> 00:03:45,270 All right. So below the anchor element, 50 00:03:45,270 --> 00:03:48,140 I am going to create the markup for the navigation menu. 51 00:03:48,140 --> 00:03:54,674 So to build the menu, I am going to use an unordered list and give it the class nav. 52 00:03:57,149 --> 00:03:59,677 And inside my nav ul element, 53 00:03:59,677 --> 00:04:05,660 I'll nest the six list items that will contain the navigation links. 54 00:04:05,660 --> 00:04:07,480 So, let me nest the first one. 55 00:04:07,480 --> 00:04:14,800 So, say, li and then in here, I'm going to nest an anchor element or the nav links. 56 00:04:14,800 --> 00:04:16,990 And let's make the first one Typography. 57 00:04:18,030 --> 00:04:24,080 So what I'll do now is copy this first list item, and paste it below five times. 58 00:04:25,860 --> 00:04:30,820 So now I'll go back up to my second link, and change it to say Button. 59 00:04:32,010 --> 00:04:34,170 Let's make the third one say Form. 60 00:04:36,020 --> 00:04:37,545 The next one will be Images. 61 00:04:40,175 --> 00:04:43,810 Then we'll do Grid, and finally, Navigation. 62 00:04:43,810 --> 00:04:48,800 All right, so let's save our index file and take a look at what we have so far, 63 00:04:48,800 --> 00:04:52,560 so when I click the Preview button, and view my navigation in the browser, 64 00:04:52,560 --> 00:04:57,000 we can see how we have the really big Poly logo up top, 65 00:04:57,000 --> 00:05:00,760 then right below we have the six navigation links. 66 00:05:00,760 --> 00:05:03,580 So now, let's begin styling the navigation with CSS. 67 00:05:03,580 --> 00:05:08,660 I'm gonna use a mobile-first approach to style the navigation. 68 00:05:08,660 --> 00:05:12,910 When we use a mobile-first approach, we serve the basic layout styles in 69 00:05:12,910 --> 00:05:18,020 the minimal amount of code to style a page for small, mobile device. 70 00:05:18,020 --> 00:05:22,480 Then at certain break points, we gradually adjust the layout with media queries, for 71 00:05:22,480 --> 00:05:24,660 wider screens and devices. 72 00:05:24,660 --> 00:05:28,980 So in other words, a mobile first approach means that I will define the common styles 73 00:05:28,980 --> 00:05:33,608 with a header, logo, and navigation links before adding any media queries. 74 00:05:33,608 --> 00:05:38,577 In my nav.css styles, I'm going to add all my comment styles first, 75 00:05:38,577 --> 00:05:42,400 right here under the Main Styles comment flag. 76 00:05:42,400 --> 00:05:46,940 First I'm going to target the class .main-header, and 77 00:05:46,940 --> 00:05:49,710 I'm going to give the main header some top padding, so 78 00:05:49,710 --> 00:05:54,070 let me add a padding-top property, and set the value to 2em. 79 00:05:55,500 --> 00:05:57,410 Next, I want to style the logo. 80 00:05:57,410 --> 00:06:03,690 So, I'll target the class site-logo, and I wanna set its width. 81 00:06:03,690 --> 00:06:09,150 So, I'll add a width property and set it to 110px. 82 00:06:09,150 --> 00:06:14,490 All right, so now, I'm going to target my nav element. 83 00:06:14,490 --> 00:06:16,680 And I'm going to give it some top margin. 84 00:06:16,680 --> 00:06:23,620 So I'll add a margin-top property, and I'll set the value to 1.5em. 85 00:06:23,620 --> 00:06:29,440 Next, I'm going to target and style the navigation links inside my nav here. 86 00:06:29,440 --> 00:06:34,630 So to do that, I'm going to target nav, then its descendant anchor elements, 87 00:06:35,890 --> 00:06:38,420 and I want to display them block, so 88 00:06:38,420 --> 00:06:43,830 I'll add a display property, set the value to block, and let's set the colors. 89 00:06:43,830 --> 00:06:47,811 I'll add a color property, #797e83, 90 00:06:47,811 --> 00:06:52,100 which gives us a shade of grey. 91 00:06:53,110 --> 00:06:55,129 Let's add a font-size property. 92 00:06:55,129 --> 00:07:02,368 So let's say font size, and I'm going to set it to 1.125em. 93 00:07:02,368 --> 00:07:05,772 And then I'll add a font weight property below that. 94 00:07:05,772 --> 00:07:09,557 We'll say font weight 300. 95 00:07:09,557 --> 00:07:14,940 And I want to align the text to center, so I'll add a text to line property. 96 00:07:14,940 --> 00:07:17,440 And, set the value to center, and a couple more. 97 00:07:17,440 --> 00:07:18,620 Let's give it some padding. 98 00:07:18,620 --> 00:07:23,342 So, I'll add a padding property and set the value to .4em. 99 00:07:23,342 --> 00:07:27,670 And finally, I want to give it a bottom border. 100 00:07:27,670 --> 00:07:32,910 So, I'll add a border-bottom property and set the value to 1px 101 00:07:33,920 --> 00:07:38,900 solid, and I'll make the color #ebecec. 102 00:07:38,900 --> 00:07:44,490 So, next, I want to target my nav links on hover. 103 00:07:44,490 --> 00:07:46,220 So, right below this rule, 104 00:07:46,220 --> 00:07:51,790 I'll create a new rule that targets the links inside nav on hover. 105 00:07:51,790 --> 00:07:53,450 And, I want to change the color. 106 00:07:53,450 --> 00:07:58,050 So, I'll add a color property and I'll make the value # 0b0b0b, 107 00:07:59,920 --> 00:08:03,280 which gives us that darker shade of black. 108 00:08:03,280 --> 00:08:05,280 Then I want to change the bottom border color. 109 00:08:05,280 --> 00:08:09,829 So I'll say border-bottom-color, and 110 00:08:09,829 --> 00:08:14,125 I'll change the value to #52bab3, 111 00:08:14,125 --> 00:08:18,640 which gives us this shade of aqua. 112 00:08:18,640 --> 00:08:21,210 All right so let's take a look at what we have so far. 113 00:08:21,210 --> 00:08:25,480 I'll save my stop sheet and go back to the preview and refresh. 114 00:08:25,480 --> 00:08:29,180 And as we can see nothing too special up to this point. 115 00:08:29,180 --> 00:08:33,520 So far we have a nice site navigation that's functional 116 00:08:33,520 --> 00:08:36,030 in all viewport sizes and devices. 117 00:08:36,030 --> 00:08:37,980 But it can be presented better. 118 00:08:37,980 --> 00:08:40,540 So we can optimize the navigation experience for 119 00:08:40,540 --> 00:08:46,200 users according to their device width, or view port size, so lets do that next. 120 00:08:46,200 --> 00:08:48,270 Instead of using floats or inline block display, 121 00:08:48,270 --> 00:08:52,732 I'm going to lay out the navigation using Flexbox. 122 00:08:52,732 --> 00:08:57,850 So, Flexbox is a CSS layout mode that is source ordered and dependent. 123 00:08:57,850 --> 00:09:02,090 That means that we can change the direction and order of a set of elements 124 00:09:02,090 --> 00:09:07,190 like the list items here in the navigation regardless of their order in the HTML. 125 00:09:07,190 --> 00:09:11,390 So, for example I can make the last list item in the list 126 00:09:11,390 --> 00:09:15,980 appear first in the navigation, or even second, third or fourth. 127 00:09:15,980 --> 00:09:21,020 This makes flex box a great tool for building a responsive site navigation. 128 00:09:21,020 --> 00:09:25,820 So, the first step in creating a Flexbox layout is to define a flex container. 129 00:09:25,820 --> 00:09:28,740 Now a flex container is the HTML element 130 00:09:28,740 --> 00:09:32,280 that contains the other elements being laid out with flex box. 131 00:09:32,280 --> 00:09:35,760 And it establishes a flex formatting context. 132 00:09:35,760 --> 00:09:41,300 So for example, the nav ul element here contains these 133 00:09:41,300 --> 00:09:44,730 list item elements used for the navigation links. 134 00:09:44,730 --> 00:09:47,673 So the ul element will be a flex container. 135 00:09:47,673 --> 00:09:51,993 Now I wanna designate two flex containers in my navigation. 136 00:09:51,993 --> 00:09:57,034 So the flex containers will be main-header and nav. 137 00:09:57,034 --> 00:10:01,695 So, back in nav.css right above the main header rule, 138 00:10:01,695 --> 00:10:05,690 below the main styles comment flag. 139 00:10:05,690 --> 00:10:09,940 I'm going to once again target the main header class and 140 00:10:09,940 --> 00:10:13,020 the nav class in the same rule. 141 00:10:13,020 --> 00:10:16,590 Now the reason I'm creating two flex containers for 142 00:10:16,590 --> 00:10:20,980 both main header, and nav is because the Flexbox formatting 143 00:10:20,980 --> 00:10:25,970 context itself does not get inherited by child elements. 144 00:10:25,970 --> 00:10:31,660 Now, since I also want to layout the list items here, inside nav. 145 00:10:31,660 --> 00:10:36,530 With Flexbox, I also need to establish a Flexbox context inside nav. 146 00:10:37,600 --> 00:10:41,195 So, back at my style sheet, inside the .main-header and 147 00:10:41,195 --> 00:10:45,980 .nav rule, I'm going to add a display property, set the value to flex. 148 00:10:45,980 --> 00:10:49,790 So now we have flex spots happening in our layout. 149 00:10:49,790 --> 00:10:53,243 So that means that the elements inside .main-header and 150 00:10:53,243 --> 00:10:56,100 .nav can be laid out vertically, horizontally, and 151 00:10:56,100 --> 00:11:00,310 have flexible dimensions, to adapt to the display space. 152 00:11:00,310 --> 00:11:03,800 So, if you've worked with Flexbox, you know that flex items, 153 00:11:03,800 --> 00:11:07,340 by default, are laid out in a horizontal direction. 154 00:11:07,340 --> 00:11:11,730 So, If I save my style sheet and refresh our preview, 155 00:11:11,730 --> 00:11:16,500 we can see that the header and nav are now laid out in the same row. 156 00:11:16,500 --> 00:11:20,360 So, I wanna change this to a column layout instead. 157 00:11:20,360 --> 00:11:24,140 That direction can be changed with the flex direction properties. 158 00:11:24,140 --> 00:11:31,600 So inside my main header and nav rule, I'm going to add the property flex direction. 159 00:11:31,600 --> 00:11:34,450 And set the value to column. 160 00:11:34,450 --> 00:11:37,640 So when I do that, notice how the header and 161 00:11:37,640 --> 00:11:43,800 navigation are now laid out in a column, instead of in a horizontal row. 162 00:11:43,800 --> 00:11:48,850 But notice how the logo is flush with the left margin of the container. 163 00:11:48,850 --> 00:11:52,220 So I want to center the logo inside the header. 164 00:11:52,220 --> 00:11:55,620 To do that, I can use the align self flex box properties. 165 00:11:55,620 --> 00:12:00,410 So back in my style sheet, I'll scroll down to the site logo rule. 166 00:12:01,500 --> 00:12:07,060 And I will add the property align-self, and set the value to center. 167 00:12:07,060 --> 00:12:09,610 So now when we take a look at it again, 168 00:12:09,610 --> 00:12:14,490 notice how the logo is now horizontally centered inside the header. 169 00:12:14,490 --> 00:12:18,080 Next, I'm going to write the CSS that will lay out the navigation 170 00:12:18,080 --> 00:12:20,670 in a wider viewport and device range. 171 00:12:20,670 --> 00:12:24,010 So, back in my nav.css file. 172 00:12:24,010 --> 00:12:27,980 I'll scroll all the way down to the media queries section here. 173 00:12:27,980 --> 00:12:32,120 And I'm going to create a media query break point, that will style the main 174 00:12:32,120 --> 00:12:38,870 header and navigation when the view port or device is at 769 pixels or wider. 175 00:12:38,870 --> 00:12:42,430 So I'll write @media. 176 00:12:42,430 --> 00:12:44,510 And I'll use the min width media feature. 177 00:12:45,650 --> 00:12:48,000 And I'll set it to 769 pixels. 178 00:12:49,410 --> 00:12:54,520 So when the view port or device is 769 pixels or 179 00:12:54,520 --> 00:12:57,850 wider, I'm going to target main header 180 00:13:01,720 --> 00:13:05,480 and set the height to 200 pixels. 181 00:13:05,480 --> 00:13:08,510 And then site logo will be a little wider. 182 00:13:08,510 --> 00:13:13,439 So, let's target site logo inside the media query and 183 00:13:13,439 --> 00:13:16,340 set the width to 140 pixels. 184 00:13:18,868 --> 00:13:21,892 I also wanna give the nav element some top-margin, 185 00:13:21,892 --> 00:13:25,020 just to give it some separation from the site-logo. 186 00:13:25,020 --> 00:13:32,220 So let's target nav and give it a margin top value of 3em. 187 00:13:33,510 --> 00:13:38,860 And finally, I'm going to target the anchor elements and side nav. 188 00:13:38,860 --> 00:13:42,220 And I'm going to change their bottom border color. 189 00:13:42,220 --> 00:13:43,020 So I'm going to say. 190 00:13:44,510 --> 00:13:45,990 Border bottom color. 191 00:13:48,550 --> 00:13:50,710 And I'll set the value to transparent. 192 00:13:50,710 --> 00:13:54,900 Now I'm setting the navigation links bottom border color to transparent, 193 00:13:54,900 --> 00:13:57,950 to remove this light grey border. 194 00:13:57,950 --> 00:13:59,810 Because at this wider break point, 195 00:13:59,810 --> 00:14:03,590 we only want to see these link border colors on hover only. 196 00:14:04,890 --> 00:14:10,440 So, when we save our style sheet, and take a look at our navigation in the browser, 197 00:14:10,440 --> 00:14:15,340 notice how once the view port is at 769 pixels wide, 198 00:14:15,340 --> 00:14:18,880 the navigation links are still laid out in a column. 199 00:14:18,880 --> 00:14:23,880 So, at this width here, I want to lay them out horizontally, in a single row. 200 00:14:23,880 --> 00:14:28,700 So, to lay them out as a row, I'm going to go back to my style sheet. 201 00:14:28,700 --> 00:14:33,360 And, I'm going to give nav a flex-direction property. 202 00:14:33,360 --> 00:14:35,190 And, I'm going to set the value to row. 203 00:14:36,580 --> 00:14:41,100 So, in the nav rule, I'll add the flex-direction property and 204 00:14:41,100 --> 00:14:42,660 the value would be row. 205 00:14:42,660 --> 00:14:43,830 So, let's take a look. 206 00:14:43,830 --> 00:14:47,040 I'll save the style sheet and when we refresh. 207 00:14:47,040 --> 00:14:51,170 Great the navigation is now laid out horizontally. 208 00:14:51,170 --> 00:14:56,960 So now I want the navigation to span the full width of it's flex container. 209 00:14:56,960 --> 00:14:59,900 And I want all the links to be evenly spaced out, 210 00:14:59,900 --> 00:15:03,700 instead of being all bunched up here on the left side of the header. 211 00:15:03,700 --> 00:15:07,700 So, flex boxes justify lets you 212 00:15:07,700 --> 00:15:12,510 define how space should be used and distributed in a flex container. 213 00:15:12,510 --> 00:15:16,170 So, back in my style sheet, inside the navrule and 214 00:15:16,170 --> 00:15:21,040 the media query, I'm going to add the justify content property. 215 00:15:21,040 --> 00:15:24,890 And I'm going to set the value to space between, 216 00:15:27,320 --> 00:15:30,818 so when we save our style sheet and take a look at it again. 217 00:15:30,818 --> 00:15:34,120 We can see how the value space between, 218 00:15:34,120 --> 00:15:37,690 evenly distributes the navigation items in a row. 219 00:15:37,690 --> 00:15:40,760 So the first item is at the start of the row, and 220 00:15:40,760 --> 00:15:44,070 the last item is at the end of the row. 221 00:15:44,070 --> 00:15:47,590 And any space in-between is evenly distributed. 222 00:15:49,270 --> 00:15:52,900 See, this is a great feature for creating responsive layouts. 223 00:15:52,900 --> 00:15:57,630 Because the navigation item adjust the size of the view port automatically. 224 00:15:57,630 --> 00:15:58,130 Really neat! 225 00:15:59,900 --> 00:16:04,190 Next, I also want to add a justify content property to my main header. 226 00:16:04,190 --> 00:16:08,380 So back on my style sheet, I'll scroll up to the main header rule. 227 00:16:08,380 --> 00:16:14,040 Inside the media query, and I'll add the property justify content. 228 00:16:14,040 --> 00:16:18,750 This time I'm going to set the value to flex end. 229 00:16:18,750 --> 00:16:23,420 So when we save our style sheet and go back to the browser, what the flex end 230 00:16:23,420 --> 00:16:30,520 property does is, it places main header at the end or bottom of the column. 231 00:16:30,520 --> 00:16:32,410 That's 200 pixels tall. 232 00:16:32,410 --> 00:16:36,950 So now, we have more separation between the logo and the top of the page. 233 00:16:37,980 --> 00:16:43,270 So, next, I'm going to go back to my style sheet and create one more media query 234 00:16:43,270 --> 00:16:48,580 that will target my layout when the view port or device is 10, 25 pixels, or wider. 235 00:16:48,580 --> 00:16:50,354 So, I'll say, @media. 236 00:16:52,508 --> 00:16:57,640 Min-width, 1025 pixels. 237 00:16:57,640 --> 00:17:02,680 So in this wide viewport range, I want to take advantage of the extra horizontal 238 00:17:02,680 --> 00:17:07,860 space, and position both the logo and navigation on the same line. 239 00:17:07,860 --> 00:17:13,480 Now currently, the main headers flex direction is set to column, 240 00:17:13,480 --> 00:17:19,190 so that's why we're seeing the logo and the navigation menu on separate lines. 241 00:17:19,190 --> 00:17:22,630 So, if I go back to my new media query, and 242 00:17:22,630 --> 00:17:29,250 target main-header and set its flex-direction to row. 243 00:17:29,250 --> 00:17:33,800 So, I'm going to add a flex-direction property and set it to row. 244 00:17:33,800 --> 00:17:38,420 When we save and take a look at it again, we can see how the logo and 245 00:17:38,420 --> 00:17:41,510 navigation are now placed on the same line. 246 00:17:41,510 --> 00:17:42,610 Pretty neat. 247 00:17:42,610 --> 00:17:46,840 So now, I want to move the logo over to the left side of the header, and 248 00:17:46,840 --> 00:17:50,290 I want the navigation menu to be on the right side. 249 00:17:50,290 --> 00:17:53,540 Margins have a significant effect on flex items. 250 00:17:53,540 --> 00:17:56,280 Particularly, the value auto. 251 00:17:56,280 --> 00:18:01,820 So a margin set to auto, will absorb any extra space 252 00:18:01,820 --> 00:18:06,230 around a flex item, and push other flex items into different positions. 253 00:18:06,230 --> 00:18:12,170 So let me show you, back in my style sheet, inside my second media query, 254 00:18:12,170 --> 00:18:15,696 I'm going to target the class .site-logo. 255 00:18:17,702 --> 00:18:21,170 And I'm going to give it a margin-right property. 256 00:18:21,170 --> 00:18:23,060 And, set the value to auto. 257 00:18:23,060 --> 00:18:25,820 So, when we take a look at it again, 258 00:18:25,820 --> 00:18:31,240 we can see how the logo is now flush with the left margin of the container. 259 00:18:31,240 --> 00:18:35,770 And, the navigation menu is perfectly placed on the right side. 260 00:18:35,770 --> 00:18:41,040 Now, since the logo's right margin is set to auto, the browser automatically inserts 261 00:18:41,040 --> 00:18:46,710 any extra space between the logo and the navigation, to the right of the logo. 262 00:18:46,710 --> 00:18:51,520 So this is a really cool feature of Flexbox, and it makes it very easy to left 263 00:18:51,520 --> 00:18:56,850 justify one Flexbox item while right justifying other Flex items. 264 00:18:56,850 --> 00:19:00,110 Next, let's adjust some of the layout here, in the navigation. 265 00:19:00,110 --> 00:19:01,930 So, I'll go back to my style sheet and 266 00:19:01,930 --> 00:19:05,160 I want to remove the top margin in the navigation. 267 00:19:05,160 --> 00:19:09,760 So, I'll target the class nav, and 268 00:19:09,760 --> 00:19:13,605 I'll do that by setting the margin-top value to zero. 269 00:19:15,792 --> 00:19:18,128 So, that extra space is not necessary, 270 00:19:18,128 --> 00:19:23,620 since the logo is no longer positioned above the nav, it's now on the same line. 271 00:19:23,620 --> 00:19:28,770 So next I want to give the navigation list items here, a left and 272 00:19:28,770 --> 00:19:31,430 right margin, and that will give them some separation, so 273 00:19:31,430 --> 00:19:36,690 right below this .nav rule, I'm going to target Nav l i. 274 00:19:36,690 --> 00:19:40,490 And then I'm going to add a margin, left property. 275 00:19:40,490 --> 00:19:43,220 And I'll set the value to 0.65em. 276 00:19:43,220 --> 00:19:48,430 And below that I'll add a margin right property. 277 00:19:48,430 --> 00:19:51,020 The value will also be 0.65em. 278 00:19:51,020 --> 00:19:53,790 Finally, I also want to position 279 00:19:53,790 --> 00:19:56,360 the navigation in the vertical center of the header. 280 00:19:56,360 --> 00:19:59,720 So I want it perfectly centered vertically in the header. 281 00:19:59,720 --> 00:20:01,795 So, instead of using margins to do that, 282 00:20:01,795 --> 00:20:05,580 I'm once again I'm going to use the align self property. 283 00:20:05,580 --> 00:20:09,470 So, in my nav room here, I'm going to add the property 284 00:20:09,470 --> 00:20:14,830 align self and I'm going to set the value to center. 285 00:20:14,830 --> 00:20:20,000 So, setting the value to center, as we can see when we refresh the page, 286 00:20:20,000 --> 00:20:22,710 It positions the nav in the vertical center of the header. 287 00:20:22,710 --> 00:20:27,090 All right, so it looks like we are all done writing our CSS, so 288 00:20:27,090 --> 00:20:29,410 let us take a look at what we have done so far. 289 00:20:29,410 --> 00:20:34,880 If I resize the browser, we can see that on narrow viewport sizes and 290 00:20:34,880 --> 00:20:36,470 mobile devices, great. 291 00:20:36,470 --> 00:20:40,940 The logo and navigation are displayed in one column, and then in the wider 292 00:20:40,940 --> 00:20:46,520 viewport range, the navigation scales up to a wider horizontal layout. 293 00:20:46,520 --> 00:20:50,650 And in the widest range, the navigation is positioned over to the right 294 00:20:50,650 --> 00:20:53,760 side of the page, so now it's on the same line as the logo. 295 00:20:53,760 --> 00:20:54,260 Perfect! 296 00:20:56,221 --> 00:20:59,890 So, now it's time to test our navigation on different devices. 297 00:20:59,890 --> 00:21:04,760 And we can do that using the Chrome Developer Tools, so the Chrome Dev Tools 298 00:21:04,760 --> 00:21:10,170 has a device simulation feature that lets us preview and test on different devices. 299 00:21:10,170 --> 00:21:14,898 So, let's go ahead and open up Dev Tools by clicking the hamburger icon menu here. 300 00:21:14,898 --> 00:21:16,530 In the top-right corner. 301 00:21:16,530 --> 00:21:20,860 And then, we'll go over to More Tools and we'll click Developer Tools. 302 00:21:21,950 --> 00:21:26,940 So, once the Chrome dev's tools panels open, we can click the phone icon, 303 00:21:26,940 --> 00:21:29,680 here, next to the inspect icon. 304 00:21:29,680 --> 00:21:31,010 And, this brings up the simulator. 305 00:21:31,010 --> 00:21:33,590 All right, so, now, we can test it on a few devices. 306 00:21:33,590 --> 00:21:37,770 So, up here in the device dropdown, 307 00:21:37,770 --> 00:21:43,620 let us first select iPad, and then as you can see, that looks pretty good. 308 00:21:43,620 --> 00:21:50,000 Next we will select iPhone 6, which looks great, and 309 00:21:50,000 --> 00:21:56,340 let us try a few more, say Samsung Galaxy Note, that looks fine. 310 00:21:56,340 --> 00:21:58,460 And finally, let's try one more. 311 00:21:58,460 --> 00:22:00,300 So let's say Galaxy S 4. 312 00:22:01,400 --> 00:22:02,410 Which looks the same. 313 00:22:02,410 --> 00:22:03,470 It looks good. 314 00:22:03,470 --> 00:22:04,040 All right, great. 315 00:22:04,040 --> 00:22:07,320 So now, we have a fully responsive navigation, 316 00:22:07,320 --> 00:22:12,910 that looks and works great on any view port size or device. 317 00:22:12,910 --> 00:22:13,870 Nice work. 318 00:22:13,870 --> 00:22:17,060 So, for more information about Flexbox, mobile-first layout, 319 00:22:17,060 --> 00:22:19,390 or anything else I've covered in this workshop, 320 00:22:19,390 --> 00:22:22,510 be sure to check the teacher's notes for additional resources.