1 00:00:02,251 --> 00:00:03,560 (Maximillian)So let's now work on the styling 2 00:00:03,560 --> 00:00:05,523 of this header and the navigation. 3 00:00:06,440 --> 00:00:10,290 Now we have this header EJS file. And there, I, 4 00:00:10,290 --> 00:00:11,123 first of all, 5 00:00:11,123 --> 00:00:14,000 we'll add an ID to the header named main header, 6 00:00:14,000 --> 00:00:17,180 which I will use for styling to uniquely identify this 7 00:00:17,180 --> 00:00:20,920 header because we could have multiple header elements on the 8 00:00:20,920 --> 00:00:22,080 page. 9 00:00:22,080 --> 00:00:25,910 The header HTML element is not exclusively used for 10 00:00:25,910 --> 00:00:26,970 navigation. 11 00:00:26,970 --> 00:00:29,810 You can use it at the beginning of a section element as 12 00:00:29,810 --> 00:00:31,030 well, for example, 13 00:00:31,030 --> 00:00:34,230 to define some header information for that section. 14 00:00:34,230 --> 00:00:37,093 And therefore I'll give it this unique identifier here. 15 00:00:37,940 --> 00:00:42,680 I'll also give my logo a unique identifier so that we will 16 00:00:42,680 --> 00:00:45,370 have a way of targeting this logo there 17 00:00:46,470 --> 00:00:49,790 and we could add more identifiers here, 18 00:00:49,790 --> 00:00:52,140 but for the moment that is it though, 19 00:00:52,140 --> 00:00:56,410 I want to add more elements to this header because at the 20 00:00:56,410 --> 00:00:59,550 moment I only have the logo and the NAV bar, 21 00:00:59,550 --> 00:01:03,500 but I want to build a website that also works on mobile 22 00:01:03,500 --> 00:01:07,740 devices and we'll learn how we can set up responsive 23 00:01:07,740 --> 00:01:10,360 interfaces and UI's. 24 00:01:10,360 --> 00:01:12,530 Now, actually thus far, 25 00:01:12,530 --> 00:01:15,890 we already did make it quite responsive. 26 00:01:15,890 --> 00:01:16,723 For example, 27 00:01:16,723 --> 00:01:19,623 the login form works on smaller screens as well. 28 00:01:20,530 --> 00:01:21,650 But for the navigation, 29 00:01:21,650 --> 00:01:24,217 I want to make sure that we don't show all the options in 30 00:01:24,217 --> 00:01:26,954 the navigation bar if we have a small screen, 31 00:01:26,954 --> 00:01:30,570 but that we instead have a mobile menu, 32 00:01:30,570 --> 00:01:33,530 which we can open with such a hamburger button, 33 00:01:33,530 --> 00:01:37,100 such a button with three bars in the navigation bar, 34 00:01:37,100 --> 00:01:40,613 which we can press to open that mobile menu overlay. 35 00:01:41,910 --> 00:01:44,310 That's my solution for mobile screens. 36 00:01:44,310 --> 00:01:46,370 And therefore we should add such a button, 37 00:01:46,370 --> 00:01:50,493 such a hamburger button, so to say, in the header, 38 00:01:51,570 --> 00:01:54,950 hence here in the header, after NAV, 39 00:01:54,950 --> 00:01:59,950 I will add a button and this button will get an ID of 40 00:02:00,810 --> 00:02:03,150 mobile menu button, 41 00:02:03,150 --> 00:02:06,993 because it will be responsible for toggling the mobile menu. 42 00:02:08,120 --> 00:02:08,979 Now in there, 43 00:02:08,979 --> 00:02:13,010 I'll add free spans because these will be the free bars 44 00:02:13,010 --> 00:02:16,740 which I want to have in that button to have this typical 45 00:02:16,740 --> 00:02:20,570 menu button, look, this hamburger button look. 46 00:02:20,570 --> 00:02:22,750 Now we'll add the styling to make the button look 47 00:02:22,750 --> 00:02:25,053 proper, together soon. 48 00:02:26,420 --> 00:02:30,150 And that's very important in this header EJS file. 49 00:02:30,150 --> 00:02:33,093 I also want to have to mobile menu itself. 50 00:02:34,010 --> 00:02:35,853 I'll add it outside of the header. 51 00:02:36,830 --> 00:02:38,723 As an aside element, 52 00:02:39,600 --> 00:02:42,610 you could use a different HTML element as well, 53 00:02:42,610 --> 00:02:46,390 but aside means that it's some side information, 54 00:02:46,390 --> 00:02:49,410 some side content belonging to 55 00:02:49,410 --> 00:02:51,900 the main area in which we use it. 56 00:02:51,900 --> 00:02:55,200 And that is exactly what that mobile menu is. 57 00:02:55,200 --> 00:02:57,140 It's not part of the main content. 58 00:02:57,140 --> 00:03:00,330 It's just some extra content which is important 59 00:03:00,330 --> 00:03:01,210 on this page. 60 00:03:01,210 --> 00:03:04,033 In this case to provide mobile navigation. 61 00:03:05,540 --> 00:03:08,530 In this mobile menu, I want to have a NAV item. 62 00:03:08,530 --> 00:03:09,760 And in the NAV item, 63 00:03:09,760 --> 00:03:13,200 I want to have exactly the same navigation structure as in 64 00:03:13,200 --> 00:03:15,710 the main NAV item and the header. 65 00:03:15,710 --> 00:03:18,230 And that main NAV item will only be visible 66 00:03:18,230 --> 00:03:20,390 on non mobile screens 67 00:03:20,390 --> 00:03:23,590 The NAV item in the side menu will be visible 68 00:03:23,590 --> 00:03:25,543 on mobile screens. 69 00:03:26,450 --> 00:03:29,710 So now to not just copy and paste all that logic, 70 00:03:29,710 --> 00:03:34,450 I'll add a new include NAV dash items sounds like a fitting 71 00:03:34,450 --> 00:03:37,380 name and in that include, 72 00:03:37,380 --> 00:03:41,770 I want to have this unordered list full of navigation items. 73 00:03:41,770 --> 00:03:45,870 So I will cut that from header EJS and add that to NAV items 74 00:03:45,870 --> 00:03:46,703 EJS. 75 00:03:48,820 --> 00:03:51,750 And then in header EJS we can include this. 76 00:03:51,750 --> 00:03:53,930 So here I will include 77 00:03:55,950 --> 00:03:58,120 header like this 78 00:03:58,120 --> 00:04:00,940 and not header NAV items like this 79 00:04:02,270 --> 00:04:03,103 here. 80 00:04:04,750 --> 00:04:06,530 And do the same in the second 81 00:04:06,530 --> 00:04:08,633 NAV block here in the aside. 82 00:04:09,890 --> 00:04:11,360 And the, this aside, 83 00:04:11,360 --> 00:04:14,780 we'll also get an idea of mobile menu because 84 00:04:14,780 --> 00:04:15,763 that is what it is. 85 00:04:17,640 --> 00:04:20,010 So that's the HTML structure. 86 00:04:20,010 --> 00:04:22,213 Now we need to work on the styling. 87 00:04:23,300 --> 00:04:26,040 And for that, for working on this styling, 88 00:04:26,040 --> 00:04:28,700 I will actually add a navigation CSS file a 89 00:04:28,700 --> 00:04:30,420 brand new CSS file, 90 00:04:30,420 --> 00:04:34,150 which is exclusively responsible for all the navigation 91 00:04:34,150 --> 00:04:38,410 related styles and in there I'll target 92 00:04:38,410 --> 00:04:40,543 my main header by ID. 93 00:04:41,530 --> 00:04:44,523 That's why I added to this main header ID here, 94 00:04:45,640 --> 00:04:48,200 and we'll now set up some general styles for that, 95 00:04:48,200 --> 00:04:51,130 and then we will work our way through all the different 96 00:04:51,130 --> 00:04:53,633 elements that make up this main navigation. 97 00:04:54,590 --> 00:04:56,050 Now for the main header, 98 00:04:56,050 --> 00:05:00,910 I want that header to generally have a width of 100%, 99 00:05:00,910 --> 00:05:03,190 especially on small screens, 100 00:05:03,190 --> 00:05:06,660 but to have a max width of 60 REM. 101 00:05:06,660 --> 00:05:08,020 So that on bigger screens, 102 00:05:08,020 --> 00:05:11,250 it doesn't sit on the left and right address and take the 103 00:05:11,250 --> 00:05:15,320 entire width, which can make the UI look really weird. 104 00:05:15,320 --> 00:05:18,230 But that instead, on a large screen, 105 00:05:18,230 --> 00:05:22,033 it has some limits after which it doesn't grow anymore. 106 00:05:23,290 --> 00:05:26,710 All give it a margin of zero auto. 107 00:05:26,710 --> 00:05:28,570 So no margin top and bottom, 108 00:05:28,570 --> 00:05:32,700 but auto left and right to center it on larger screens 109 00:05:32,700 --> 00:05:34,763 where the max with becomes active. 110 00:05:36,220 --> 00:05:37,790 And before I do that, 111 00:05:37,790 --> 00:05:41,543 actually I'll give it a height of five REM. 112 00:05:42,520 --> 00:05:46,010 That should be a fixed height for this header here. 113 00:05:46,010 --> 00:05:47,890 And of course, that should be clear, 114 00:05:47,890 --> 00:05:51,350 but I'm still saying it feel free to experiment with those 115 00:05:51,350 --> 00:05:54,560 styles and come up with your own styles. It's your project. 116 00:05:54,560 --> 00:05:58,233 It's your practice definitely style it the way you want. 117 00:05:59,090 --> 00:06:01,940 These are just the styles I came up with ahead of time. 118 00:06:01,940 --> 00:06:04,760 And therefore the styles I will use here. 119 00:06:04,760 --> 00:06:06,430 Now, we'll also add some padding, 120 00:06:06,430 --> 00:06:09,070 but I don't want any padding top and bottom instead just 121 00:06:09,070 --> 00:06:11,180 left and right. 122 00:06:11,180 --> 00:06:15,830 And here all simply add space six as a padding to left and 123 00:06:15,830 --> 00:06:19,573 right, and zero top and bottom, 124 00:06:20,550 --> 00:06:24,970 and then add display flex so that I can position the items, 125 00:06:24,970 --> 00:06:26,900 the logo, the NAV bar, 126 00:06:26,900 --> 00:06:31,593 and the hamburger button with Flexbox inside of this header. 127 00:06:32,660 --> 00:06:36,990 And I'll add justify content space between so that I push 128 00:06:36,990 --> 00:06:40,310 all the content to the left and right address of the header 129 00:06:40,310 --> 00:06:44,350 and the mobile menu button is pushed to the right since it's 130 00:06:45,396 --> 00:06:46,450 the last element in there. 131 00:06:46,450 --> 00:06:49,860 And the logo is pushed to the left since it's the first 132 00:06:49,860 --> 00:06:51,450 element in there. 133 00:06:51,450 --> 00:06:56,450 And then I will set a line items to center so that on the 134 00:06:56,820 --> 00:07:00,000 cross axis, so vertically by default, 135 00:07:00,000 --> 00:07:03,650 we center all these items so that they're on the same level 136 00:07:03,650 --> 00:07:05,253 centered vertically. 137 00:07:07,460 --> 00:07:12,460 I will also add a border bottom here of one pixels solid. 138 00:07:13,070 --> 00:07:18,070 And then here all use one of my predefined CSS variables 139 00:07:18,670 --> 00:07:21,113 in this case color primary 500. 140 00:07:22,920 --> 00:07:27,420 And I'll give the header a background color of color, 141 00:07:27,420 --> 00:07:29,083 gray 500. 142 00:07:30,760 --> 00:07:34,960 With that, we now need to include this navigation CSS file 143 00:07:34,960 --> 00:07:37,390 into our pages to see an effect. 144 00:07:37,390 --> 00:07:40,080 And since the header is on every screen, 145 00:07:40,080 --> 00:07:43,120 these styles should be applied to every screen. 146 00:07:43,120 --> 00:07:46,120 And hence we could've added those styles into the base 147 00:07:46,120 --> 00:07:47,660 CSS file, of course. 148 00:07:47,660 --> 00:07:51,360 I'm just splitting them into a new file so that we have an 149 00:07:51,360 --> 00:07:54,910 easier time finding the navigation specific styles if we 150 00:07:54,910 --> 00:07:56,550 ever want to change them. 151 00:07:56,550 --> 00:08:00,460 So it's just for clean code organization purposes. 152 00:08:00,460 --> 00:08:03,800 We want those styles on every page so we could add them to 153 00:08:03,800 --> 00:08:07,030 base CSS theoretically, but for the reasons mentioned, 154 00:08:07,030 --> 00:08:08,730 I put them into their own file, 155 00:08:08,730 --> 00:08:11,510 but since I want them on every page, I'll go to head. 156 00:08:11,510 --> 00:08:15,860 EJS where we also are including base CSS already. 157 00:08:15,860 --> 00:08:18,970 And this will be used on every page. So here, 158 00:08:18,970 --> 00:08:22,593 I then also include navigation CSS. 159 00:08:24,040 --> 00:08:26,563 With that it's included on every page now. 160 00:08:28,330 --> 00:08:30,330 And if we now reload, this, 161 00:08:30,330 --> 00:08:32,530 this our header. Not finished, 162 00:08:32,530 --> 00:08:36,720 but we can see Flexbox having an effect and to the border on 163 00:08:36,720 --> 00:08:38,563 the bottom, having an effect. 164 00:08:40,130 --> 00:08:41,890 Now there's more work to be done. 165 00:08:41,890 --> 00:08:43,582 Let's continue with the logo. 166 00:08:44,600 --> 00:08:47,530 I'll start by targeting the logo and then the anchor tag in 167 00:08:47,530 --> 00:08:48,480 there, 168 00:08:48,480 --> 00:08:52,373 because we do have an anchor tag in our logo here. 169 00:08:53,310 --> 00:08:56,890 And here, I want to set the font weight to bold 170 00:08:56,890 --> 00:09:00,310 and change the font size to make the logo stand out 171 00:09:00,310 --> 00:09:01,143 a bit. 172 00:09:02,050 --> 00:09:02,903 Like this. 173 00:09:04,720 --> 00:09:06,793 Now the logo is a bit more prominent. 174 00:09:09,010 --> 00:09:12,620 Next. I want to work on my NAV items. 175 00:09:12,620 --> 00:09:14,593 So on the unordered list here. 176 00:09:16,040 --> 00:09:18,517 And for this, actually I'll give that unordered list 177 00:09:18,517 --> 00:09:22,670 and the NAV items EJS fall a class of NAV items, 178 00:09:22,670 --> 00:09:25,400 and I'm using a class here because we're using this 179 00:09:25,400 --> 00:09:30,340 unordered list twice, in the header and in the aside. 180 00:09:30,340 --> 00:09:31,810 I'm including it twice, 181 00:09:31,810 --> 00:09:34,560 and hence we shouldn't use an ID because IDs should be 182 00:09:34,560 --> 00:09:35,393 unique. 183 00:09:35,393 --> 00:09:37,440 Though, of course we could argue that later 184 00:09:37,440 --> 00:09:39,930 we'll only see one of the two on the screen at the same 185 00:09:39,930 --> 00:09:43,770 time. So, actually you could also go for an ID, 186 00:09:43,770 --> 00:09:46,520 but I'll go for a clause here, NAV items. 187 00:09:46,520 --> 00:09:48,200 And in navigation, CSS, 188 00:09:48,200 --> 00:09:50,943 we can now target NAV items like this. 189 00:09:51,870 --> 00:09:54,710 And there, I want to set this to display flex as well, 190 00:09:54,710 --> 00:09:57,800 so that all the list items in an unordered list are also 191 00:09:57,800 --> 00:09:59,223 positioned in a row. 192 00:10:00,060 --> 00:10:03,530 And I'll add a line item center here to center them 193 00:10:03,530 --> 00:10:04,363 vertically. 194 00:10:06,380 --> 00:10:09,620 So now these are sitting next to each other 195 00:10:09,620 --> 00:10:11,040 also here in the aside. 196 00:10:11,040 --> 00:10:13,470 And of course, we'll make sure that we only see either of 197 00:10:13,470 --> 00:10:15,761 the two, depending on the screen size in a 198 00:10:15,761 --> 00:10:17,881 in a little while as well. 199 00:10:17,881 --> 00:10:20,810 For the moment, I'll just focus on styling 200 00:10:20,810 --> 00:10:23,023 the parts up here appropriately. 201 00:10:24,498 --> 00:10:29,170 So next let's work on that mobile menu button, 202 00:10:29,170 --> 00:10:31,430 which we have in the header. 203 00:10:31,430 --> 00:10:35,100 So this button with the free spans inside of it, 204 00:10:35,100 --> 00:10:39,420 and this button has an ID of mobile menu button. 205 00:10:39,420 --> 00:10:43,990 So we can use that ID to select it like this. 206 00:10:43,990 --> 00:10:48,830 And then here I will set this to display flex, 207 00:10:50,840 --> 00:10:53,890 but set the flex direction to column, 208 00:10:53,890 --> 00:10:57,029 because here I now want to organize these free bars 209 00:10:57,029 --> 00:11:01,070 from top to bottom, not from left to right, so not in a row, 210 00:11:01,070 --> 00:11:02,133 but in a column. 211 00:11:03,030 --> 00:11:06,570 I'll set justify content to space around so 212 00:11:06,570 --> 00:11:09,440 that there is some evenly distributed space around 213 00:11:09,440 --> 00:11:10,473 these bars. 214 00:11:12,570 --> 00:11:15,090 And I'll set the border to non. 215 00:11:15,090 --> 00:11:18,660 I'll set the cursor to pointer. for this button 216 00:11:18,660 --> 00:11:20,620 even though on a mobile screen, 217 00:11:20,620 --> 00:11:23,100 we typically don't hover over it because we have a touch 218 00:11:23,100 --> 00:11:25,750 interface and we don't see that effect, 219 00:11:25,750 --> 00:11:28,870 but still I'll set it to pointer here. 220 00:11:28,870 --> 00:11:32,439 I'll give it a width of 2.25 REM, and give it 221 00:11:32,439 --> 00:11:36,830 a height of 2.25 REM. 222 00:11:36,830 --> 00:11:41,010 And now we, of course all's need to style the spans in there 223 00:11:41,010 --> 00:11:42,520 appropriately. 224 00:11:42,520 --> 00:11:43,460 So all the target, 225 00:11:43,460 --> 00:11:48,030 the spans inside of such a mobile menu button and all those 226 00:11:48,030 --> 00:11:53,030 spans will have to same width, and then a height of, 227 00:11:53,070 --> 00:11:54,920 let's say .2 REM 228 00:11:55,960 --> 00:12:00,570 and a background color of var color gray 100, 229 00:12:00,570 --> 00:12:03,043 which is a pretty white ish, gray tone. 230 00:12:05,460 --> 00:12:09,750 With that, if I reload, this looks almost good. 231 00:12:09,750 --> 00:12:14,530 I want to get rid of the background color though. 232 00:12:14,530 --> 00:12:17,180 So I'll set that to transparent so that we have no 233 00:12:17,180 --> 00:12:20,943 background color and I'll remove any padding we might have. 234 00:12:23,470 --> 00:12:27,080 And with that, this is my mobile menu button. 235 00:12:27,080 --> 00:12:28,920 Which at the moment doesn't do anything, 236 00:12:28,920 --> 00:12:30,283 but it's there at least. 237 00:12:32,460 --> 00:12:35,919 Now, of course these navigation items are a little bit 238 00:12:35,919 --> 00:12:39,763 too close to each other. So we want to change that for sure. 239 00:12:41,730 --> 00:12:46,500 Hence what I'll do there is I'll go back to my NAV items and 240 00:12:46,500 --> 00:12:50,020 select all the list items in there. 241 00:12:50,020 --> 00:12:52,290 And we wouldn't have to do that here. 242 00:12:52,290 --> 00:12:55,480 We could also do that after defining the mobile menu button, 243 00:12:55,480 --> 00:12:56,650 related styles. 244 00:12:56,650 --> 00:12:59,903 I just like to keep related style definitions close 245 00:12:59,903 --> 00:13:03,410 to each other, since that makes maintaining that code 246 00:13:03,410 --> 00:13:06,940 and working with the code a bit easier in my experience. 247 00:13:06,940 --> 00:13:09,680 So after working on the NAV items styles, 248 00:13:09,680 --> 00:13:11,960 I'll work on the styles of the list items in the 249 00:13:11,960 --> 00:13:13,350 NAV items. 250 00:13:13,350 --> 00:13:15,700 And here I in the end, 251 00:13:15,700 --> 00:13:19,640 just want to make sure that we add a little bit of margin to 252 00:13:19,640 --> 00:13:20,893 left and right, 253 00:13:21,760 --> 00:13:26,640 let's say of VAR space two left and right, zero top and 254 00:13:26,640 --> 00:13:27,473 bottom. 255 00:13:28,840 --> 00:13:33,623 And with that all being done this now clearly looks better. 256 00:13:35,020 --> 00:13:37,220 Now this is some base styling. 257 00:13:37,220 --> 00:13:40,640 Now we definitely want to adjust this for differentiation 258 00:13:40,640 --> 00:13:44,140 between mobile and desktop devices. 259 00:13:44,140 --> 00:13:46,170 For example, on desktop devices. 260 00:13:46,170 --> 00:13:48,890 I don't want that hamburger button. 261 00:13:48,890 --> 00:13:52,400 I just want the logo and these navigation items. 262 00:13:52,400 --> 00:13:54,660 On a mobile device, on the other hand, 263 00:13:54,660 --> 00:13:58,680 I don't want these navigation items here in the header. 264 00:13:58,680 --> 00:14:01,440 I just want to have to mobile menu button instead 265 00:14:01,440 --> 00:14:03,090 and the logo. 266 00:14:03,090 --> 00:14:07,360 And I want to have that mobile overview with nicely styled 267 00:14:07,360 --> 00:14:10,800 navigation items, if that hamburger button is pressed 268 00:14:11,780 --> 00:14:15,230 so that differentiation and making that hamburger button 269 00:14:15,230 --> 00:14:17,743 work, that's what we'll work on next.