0 1 00:00:00,180 --> 00:00:06,360 In this video, we're going to add Navigation bar to our page. Webflow has a default navigation bar element 1 2 00:00:06,360 --> 00:00:07,760 called Navbar. 2 3 00:00:07,800 --> 00:00:13,800 This is one of the premade Webflow elements I do like to use. Which we can add from the Elements panel 3 4 00:00:13,830 --> 00:00:18,960 under the Components section. Drag it to the top to bring it on top of the hero section. 4 5 00:00:20,590 --> 00:00:22,840 Navbar already comes with elements inside. 5 6 00:00:23,020 --> 00:00:25,660 Let's have a look exactly what's this Navbar made of. 6 7 00:00:28,410 --> 00:00:30,680 So inside the parent Navbar element, 7 8 00:00:30,690 --> 00:00:32,160 we have a container. 8 9 00:00:32,280 --> 00:00:38,370 This container is similar to what we did with our hero content, centered in the middle with a maximum 9 10 00:00:38,370 --> 00:00:41,230 width, so elements are nicely wrapped inside it. 10 11 00:00:41,430 --> 00:00:46,190 Then inside that, we have 3 other elements, which again are boxes. 11 12 00:00:46,290 --> 00:00:48,850 First one, the brand, sits on the left. 12 13 00:00:48,870 --> 00:00:50,970 That's where we put the logo. 13 14 00:00:50,970 --> 00:00:55,290 Nav Menu is where these 3 navigation links are sitting. 14 15 00:00:55,290 --> 00:01:00,690 Like most other things, that's just a regular Div Blog, but with some default styles already applied to it. 15 16 00:01:01,110 --> 00:01:03,860 We're able to change these styles if we want to. 16 17 00:01:03,870 --> 00:01:06,870 And third, we have menu button, but it's invisible. 17 18 00:01:06,870 --> 00:01:10,530 You can see here that there is a Display None applied to this item, 18 19 00:01:10,560 --> 00:01:16,350 so it hides. Menu button is invisible only on the desktop. On other devices is visible and you can see 19 20 00:01:16,350 --> 00:01:22,470 why. It's a hamburger icon that drops down the hidden navigation links. Which you're probably familiar 20 21 00:01:22,470 --> 00:01:28,010 with, because that's what most of the Web sites have. Fitting navigation links on mobile devices is difficult. 21 22 00:01:28,020 --> 00:01:32,490 We use this hidden navigation menu and the hamburger icon that contains those links. 22 23 00:01:35,310 --> 00:01:38,650 Navbar acts just like any other HTML element in Webflow. 23 24 00:01:38,670 --> 00:01:43,080 But it also has some extra options inside settings. 24 25 00:01:43,130 --> 00:01:49,520 There is an option to open and close the menu. Menu is basically what's hidden in mobile devices. In desktop 25 26 00:01:49,520 --> 00:01:50,030 version, 26 27 00:01:50,030 --> 00:01:53,510 this doesn't do anything, because menu is visible at all times. 27 28 00:01:53,510 --> 00:02:00,020 There are 3 types of menus in here. Drop Down, which is the default. Right side and Left side menu. 28 29 00:02:00,020 --> 00:02:02,630 I mainly use the default drop down option. 29 30 00:02:02,630 --> 00:02:04,950 Underneath there are options for Easing. 30 31 00:02:04,980 --> 00:02:10,790 This is relating to the animation. Easing is an animation that starts slow and then accelerates. 31 32 00:02:10,790 --> 00:02:16,340 This is how most animations on the web are set. But more about this later, in entire section dedicated 32 33 00:02:16,340 --> 00:02:18,220 to interactions and animations. 33 34 00:02:18,300 --> 00:02:23,570 I leave all these settings on default. Only thing that I use here is the open and close menu, so I can 34 35 00:02:23,570 --> 00:02:26,960 visually style the menu. Another useful setting 35 36 00:02:26,960 --> 00:02:30,850 here can be the display options for the menu. With this slider 36 37 00:02:30,860 --> 00:02:36,960 we can set on which devices should there be a drop down menu. And on which devices to leave regular navigation 37 38 00:02:36,990 --> 00:02:40,020 links, just like the desktop version. 38 39 00:02:40,040 --> 00:02:42,440 For example, if you move the slider to the right, 39 40 00:02:42,440 --> 00:02:48,050 this will disable it from the tablets. Meaning on tablets we'll see the regular links and on anything 40 41 00:02:48,050 --> 00:02:49,930 smaller we'll see the hamburger menu. 41 42 00:02:54,280 --> 00:02:57,400 Now let's style the Navbar to match our design. 42 43 00:02:57,550 --> 00:02:59,120 First the background. 43 44 00:02:59,110 --> 00:03:00,040 That's quite simple. 44 45 00:03:00,040 --> 00:03:02,700 Just set it to blue from the background property. 45 46 00:03:08,160 --> 00:03:13,230 One thing you'll notice is that content inside the Navbar stretches only until a certain point. 46 47 00:03:13,230 --> 00:03:16,320 That's because the content is sitting inside the container. 47 48 00:03:16,320 --> 00:03:18,360 And this is not the container we made. 48 49 00:03:18,360 --> 00:03:22,270 It's a default container from Webflow, which is not as wide as ours. 49 50 00:03:22,290 --> 00:03:23,630 We don't want that container. 50 51 00:03:23,630 --> 00:03:28,800 Instead, we want to use the container that we already made. Like the one where our hero content is sitting 51 52 00:03:28,800 --> 00:03:29,380 inside. 52 53 00:03:29,400 --> 00:03:35,520 So, how can we use our container instead? Just like the way we reuse any other element, by applying the 53 54 00:03:35,520 --> 00:03:41,990 same class. And you will see how the container instantly changes the width. 54 55 00:03:42,000 --> 00:03:47,170 This is the class that we created, and we gave it to this container that we styled before. 55 56 00:03:47,550 --> 00:03:53,850 And if we apply this to this Nav bar container, all those styles and properties will be carried to this 56 57 00:03:53,850 --> 00:03:56,810 nav bar container. Just like what we did with buttons. 57 58 00:03:56,820 --> 00:04:02,190 If we decide to change the width of our default container in one place, it will instantly update in every 58 59 00:04:02,190 --> 00:04:02,790 other place. 59 60 00:04:02,790 --> 00:04:06,680 Just like magic. 60 61 00:04:06,810 --> 00:04:10,840 Next, we need to insert our logo. Just like we did with the hero image, 61 62 00:04:10,850 --> 00:04:13,910 we're going to export the logo and drop it as an image element. 62 63 00:04:14,320 --> 00:04:18,050 Unlike with our hero image, this time we're going to select SVG. 63 64 00:04:18,100 --> 00:04:18,410 Why? 64 65 00:04:18,420 --> 00:04:22,860 Because we created our logo ourselves in Figma. It's a regular text right now. 65 66 00:04:22,920 --> 00:04:29,840 If we export it in SVG, we will maintain its vector-based qualities. It will be retina optimized right away. 66 67 00:04:29,840 --> 00:04:35,940 It will stretch infinitely, without losing quality. And file size is going to be very small. In most cases, 67 68 00:04:35,970 --> 00:04:39,490 SVGs will be smaller than PNGs and JPGs. 68 69 00:04:39,500 --> 00:04:39,890 All right. 69 70 00:04:39,890 --> 00:04:45,840 Once you have the image exported, add a new image element and upload the logo like we did last time. 70 71 00:04:46,770 --> 00:04:52,500 I have Brand elements selected, so when I click the image, it will automatically drop inside that Brand 71 72 00:04:52,500 --> 00:04:53,090 box. 72 73 00:05:03,110 --> 00:05:05,090 But the logo is glued to the top. 73 74 00:05:05,090 --> 00:05:06,800 How do we fix this? 74 75 00:05:06,800 --> 00:05:08,990 There are many ways to make it algin in the center. 75 76 00:05:08,990 --> 00:05:12,620 Probably the simplest is to add a top margin to the image itself. 76 77 00:05:18,780 --> 00:05:21,090 Let's now style the navigation links. 77 78 00:05:21,220 --> 00:05:23,470 We're going to do that just like anything else. 78 79 00:05:23,500 --> 00:05:29,650 But first, what we're going to do, is delete all other Nav links and just keep one. We will apply some style 79 80 00:05:29,650 --> 00:05:29,920 to it, 80 81 00:05:29,920 --> 00:05:31,960 so Webflow automatically creates a class. 81 82 00:05:35,050 --> 00:05:40,100 Now we can duplicate this Nav link as many times as we want. And when we make a change to one of them, 82 83 00:05:40,130 --> 00:05:42,800 all of them will be updated instantly. 83 84 00:05:42,810 --> 00:05:43,470 Long live CSS. 84 85 00:05:43,470 --> 00:05:50,160 So we're going to apply the appropriate textiles. Pretty straightforward. 85 86 00:06:13,090 --> 00:06:15,590 And apply spacing to match our designs. 86 87 00:06:15,640 --> 00:06:21,050 We can measure spacing in Figma and apply the exact spaces in here too. The space on top in Figma is 87 88 00:06:21,040 --> 00:06:27,550 42 pixels, and on the side it's 30. In Webflow we'll use padding for this. We could use margins, 88 89 00:06:27,550 --> 00:06:30,370 but by default it already has padding and it's quite nice 89 90 00:06:30,370 --> 00:06:30,850 this way. 90 91 00:06:36,210 --> 00:06:39,760 On the sides, we'll use 15 pixels for each side. 91 92 00:06:39,810 --> 00:06:46,080 This way padding of two neighbouring links will add up to a total of 30 pixels. By using padding the entire 92 93 00:06:46,080 --> 00:06:51,620 link will grow, so users will be able to click not just with the text but with the entire box. 93 94 00:06:51,640 --> 00:06:56,160 You'll see that link is clickable even on the empty space. Because it's not an empty space, 94 95 00:06:56,160 --> 00:06:58,230 the entire thing is link itself. 95 96 00:07:01,120 --> 00:07:06,370 Finally, let's add that button. Although instead of using a button element I'm just going to create the 96 97 00:07:06,370 --> 00:07:08,640 button from one of these Nav links. 97 98 00:07:08,800 --> 00:07:14,440 Duplicate the class, so we can make new changes without affecting other navigation links. 98 99 00:07:14,440 --> 00:07:17,340 Now let's see what properties our button has in Figma. 99 100 00:07:19,040 --> 00:07:27,840 The textile is the same as the navigation links. The background is wide, but with 20% opacity. And 100 101 00:07:27,840 --> 00:07:34,770 the padding around the text is 12 pixel on top and bottom, and 24 on the sides. Let's recreate all that 101 102 00:07:34,770 --> 00:07:39,050 in Webflow. Inside Webflows color picker, 102 103 00:07:39,060 --> 00:07:44,240 you can apply 20% opacity from this box named A - for Alpha value. 103 104 00:07:44,400 --> 00:07:46,160 Not sure why Alpha and why not 104 105 00:07:46,170 --> 00:07:50,770 O for Opacity. It's something to do with RGBA color system. But, who cares? 105 106 00:07:50,790 --> 00:07:53,010 We have different padding than our Nav links. 106 107 00:08:13,750 --> 00:08:18,200 And we have rounded corners which we can set in border section. 107 108 00:08:18,220 --> 00:08:21,280 There is no exact value here. Increase it until it stops rounding. 108 109 00:08:21,280 --> 00:08:22,870 No problem if you go over it. 109 110 00:08:22,960 --> 00:08:23,510 All right. 110 111 00:08:23,630 --> 00:08:26,680 Inside Figma, we can see that it has 30 pixel margin on the top. 111 112 00:08:33,200 --> 00:08:39,830 And for the left margin, we're going to use 15. Because it will add up with an existing 15 margin from 112 113 00:08:39,830 --> 00:08:40,570 that Nav link 113 114 00:08:40,580 --> 00:08:46,280 next to it. Because of new spacing, logo is out of line as you can see. We gonna have to align 114 115 00:08:46,280 --> 00:08:50,870 the logo in the middle with the nav menu. We're gonna have to align it by eye. 115 116 00:08:58,010 --> 00:09:06,330 Finally, let's check the fluidity and responsiveness of our navbar. As you can see they are being squeezed 116 117 00:09:06,570 --> 00:09:07,410 to the edges. 117 118 00:09:07,410 --> 00:09:12,540 That's because we don't have any extra spacing. The hero section is fine because it has padding applied 118 119 00:09:12,690 --> 00:09:13,410 on the sides. 119 120 00:09:13,740 --> 00:09:19,590 So when browser window shrinks and container shrinks with it, the padding will stop it from being squeezed 120 121 00:09:19,650 --> 00:09:21,430 all the way to the edges. 121 122 00:09:21,450 --> 00:09:24,490 We can apply the similar padding to our navbar as well. 122 123 00:09:33,010 --> 00:09:34,530 And there. Now it's looking good. 123 124 00:09:47,250 --> 00:09:48,060 It's almost done. 124 125 00:09:48,060 --> 00:09:50,300 There is one small, but important thing missing. 125 126 00:09:50,460 --> 00:09:55,170 Hover effects. None of the links or buttons react when I move mouse over them. 126 127 00:09:55,200 --> 00:09:58,650 We're going to learn how to add the hover effects in the next lesson. 127 128 00:09:58,660 --> 00:09:58,970 Right. 128 129 00:09:58,980 --> 00:10:06,480 So to recap. We learned how to add a navigation bar. The anatomy of a navbar and what is it made of. The 129 130 00:10:06,480 --> 00:10:09,860 settings of a navbar and how it works on smaller devices. 130 131 00:10:09,870 --> 00:10:15,120 We learned how to add a logo inside a navbar, and how to style links inside the navigation menu.