0
1
00:00:02,740 --> 00:00:06,340
In this video, we're going to build the navbar. If you remember,
1

2
00:00:06,340 --> 00:00:11,680
navigation bar is a premade component in Webflow, which we can drag right on the canvas from here.
2

3
00:00:12,460 --> 00:00:14,550
And we can style it as we want it.
3

4
00:00:14,560 --> 00:00:16,120
Here is a hidden Webflow trick.
4

5
00:00:16,120 --> 00:00:20,380
Press CMD/CTRL+E, you'll get this quick find bar.
5

6
00:00:20,380 --> 00:00:24,000
Here you can search all the elements and find assets and much more.
6

7
00:00:24,220 --> 00:00:29,260
You can search navbar and drag it directly to the page or just hit enter and will insert automatically.
7

8
00:00:32,040 --> 00:00:32,350
Okay.
8

9
00:00:32,380 --> 00:00:37,990
So what do we need to do with the navbar? First thing that I notice is the container size.
9

10
00:00:37,990 --> 00:00:43,080
Navbar is using a default container width off 950 pixels or something like that.
10

11
00:00:43,180 --> 00:00:47,410
If you remember, last time we've used a different container. But what is the container size
11

12
00:00:47,410 --> 00:00:49,920
we want to use? That's quite simple to find out.
12

13
00:00:49,930 --> 00:00:56,770
We just need to measure the container in Figma, which is exactly the full width of our grid. Draw a rectangle
13

14
00:00:56,770 --> 00:00:59,360
over it and see what's the width of that rectangle.
14

15
00:00:59,440 --> 00:01:02,470
That's 1160 pixels.
15

16
00:01:02,470 --> 00:01:04,220
Now what do we need to do in Webflow?
16

17
00:01:04,270 --> 00:01:07,930
We just need to take the container and give it a new max width size.
17

18
00:01:07,930 --> 00:01:10,570
Why are we giving it max width and not the regular width?
18

19
00:01:10,660 --> 00:01:13,080
Because regular width isn't responsive.
19

20
00:01:13,450 --> 00:01:16,690
We want it to shrink when a screen shrinks. And a regular width will
20

21
00:01:16,780 --> 00:01:19,290
keep it at 1160 pixels.
21

22
00:01:19,300 --> 00:01:22,010
And no matter the screen size. And there we have it.
22

23
00:01:22,090 --> 00:01:30,240
We have a new CSS style named Container that has max-width of 1160 pixels.
23

24
00:01:30,250 --> 00:01:32,700
Next, we need to change the background.
24

25
00:01:32,760 --> 00:01:35,160
Our navbar in the design is transparent.
25

26
00:01:35,180 --> 00:01:36,550
That's easy to change.
26

27
00:01:36,550 --> 00:01:41,170
Select the entire navbar, not just the container and change the color to transparent.
27

28
00:01:41,170 --> 00:01:41,490
OK.
28

29
00:01:41,500 --> 00:01:43,000
Now let's add the logo.
29

30
00:01:43,000 --> 00:01:50,430
We need to export it from Figma first. We're going to export it as SVG file because for vector
30

31
00:01:50,430 --> 00:01:52,650
based images it's the best file format.
31

32
00:01:52,650 --> 00:01:59,060
It's a small file size and it never loses quality, no matter how much you stretch it. To insert the logo
32

33
00:01:59,060 --> 00:02:00,110
inside the brand box,
33

34
00:02:00,110 --> 00:02:02,930
we need to first drop the image element.
34

35
00:02:03,110 --> 00:02:04,040
Do you see what I did here?
35

36
00:02:04,040 --> 00:02:04,720
Quick find,
36

37
00:02:04,730 --> 00:02:05,770
then search for image,
37

38
00:02:05,780 --> 00:02:10,310
and because I had brand element selected, it dropped right inside when I hit enter.
38

39
00:02:18,950 --> 00:02:20,940
Next lets style the links,
39

40
00:02:20,960 --> 00:02:24,380
but first we need to add the font to our project.
40

41
00:02:24,410 --> 00:02:26,410
We're using a Google font called Cabin.
41

42
00:02:26,420 --> 00:02:28,710
It's not inside the list of fonts here.
42

43
00:02:28,760 --> 00:02:31,700
So we have to add the font from the project settings.
43

44
00:02:31,700 --> 00:02:34,150
We can access that page from this link here.
44

45
00:02:34,160 --> 00:02:41,390
It will take you exactly to the right place.
45

46
00:02:41,410 --> 00:02:44,470
I think we're using most of the font styles, so let's add all of it.
46

47
00:02:47,730 --> 00:02:48,430
And done.
47

48
00:02:48,440 --> 00:02:52,130
Now we can go back to the designer and start building or designing.
48

49
00:02:52,220 --> 00:02:56,900
If you kept the designer tab open, make sure to refresh it after you add font so the font shows up
49

50
00:02:56,900 --> 00:02:57,840
in the dropdown.
50

51
00:02:57,860 --> 00:03:02,770
Now the obvious way to apply a font to something is by selecting the element and changing the font.
51

52
00:03:02,840 --> 00:03:07,290
But this is not utilizing the full power of HTML and CSS.
52

53
00:03:07,400 --> 00:03:13,340
If we apply a font style on something high level, then it will be inherited by all of the children.
53

54
00:03:13,370 --> 00:03:18,280
The highest element in the hierarchy is the body, we can access body from the navigator.
54

55
00:03:18,290 --> 00:03:24,530
Once you have body selected, go to the selector field and from the dropdown select body. When you select
55

56
00:03:24,530 --> 00:03:28,480
the body tag, you'll see some of the font styles aren't blue.
56

57
00:03:28,540 --> 00:03:31,120
That means, some styles have already been applied to it
57

58
00:03:31,120 --> 00:03:34,260
by default. We can change the font to Cabin here.
58

59
00:03:35,390 --> 00:03:41,900
Now every new element heading, paragraph, tags will all be Cabin by default. Until we override them.
59

60
00:03:41,900 --> 00:03:45,230
Why is this approach superior to changing fonts directly on each element?
60

61
00:03:45,320 --> 00:03:46,850
Well first, saves time.
61

62
00:03:46,850 --> 00:03:52,400
But second, just by changing on the body tag, we can edit the font on the entire website with a couple
62

63
00:03:52,400 --> 00:03:53,100
of clicks.
63

64
00:03:53,240 --> 00:03:54,010
That's it now
64

65
00:03:54,010 --> 00:03:57,320
nav links are inheriting font from the body tag.
65

66
00:03:57,380 --> 00:04:01,520
You can even click on this orange link and it will tell you that it's inheriting the style from the
66

67
00:04:01,520 --> 00:04:04,900
body tag.
67

68
00:04:04,930 --> 00:04:07,920
Now lets style the rest of the properties on the links.
68

69
00:04:07,930 --> 00:04:12,500
Change the color to white from here. The other links weren't styled.
69

70
00:04:12,500 --> 00:04:13,220
Why's that?
70

71
00:04:13,220 --> 00:04:18,660
Because we don't have a style class applied to them by default. By changing the color on the first one,
71

72
00:04:18,660 --> 00:04:22,460
Webflow created a new style class automatically and called it a nav link.
72

73
00:04:22,460 --> 00:04:27,730
Now we can take that class and apply it on other 2, so all the changes apply to all of them.
73

74
00:04:33,130 --> 00:04:35,740
We have 5 nav links in the design. And one of them is a button.
74

75
00:04:43,390 --> 00:04:46,840
Let's change the sizes of the links to match the size of the button.
75

76
00:04:46,840 --> 00:04:51,760
If we select one of them and check the spacing properties, you'll see that their sizes are determined
76

77
00:04:51,760 --> 00:04:52,820
by padding.
77

78
00:04:52,900 --> 00:04:58,440
If we change this padding values to match the button in our designs, then we'll get the matching size.
78

79
00:04:59,820 --> 00:05:03,900
The padding of the button in the designs is 12 vertically and 20 horizontally.
79

80
00:05:14,610 --> 00:05:17,460
Let's style the last link to turn it into a button.
80

81
00:05:17,480 --> 00:05:21,860
We just need to add a background and round the corners. But we cannot just style it right off the bat,
81

82
00:05:21,860 --> 00:05:22,640
can we?
82

83
00:05:22,640 --> 00:05:26,370
It has the same class as others, so it's going to edit all the links.
83

84
00:05:26,390 --> 00:05:28,550
What do we do? The combo class,
84

85
00:05:28,550 --> 00:05:32,480
of course. Go to the selector field and type a new name next to the nav link.
85

86
00:05:32,510 --> 00:05:34,570
That's going to give it a combo class.
86

87
00:05:34,690 --> 00:05:38,580
CSS isn't case sensitive, so it doesn't matter if you use uppercase or lowercase.
87

88
00:05:38,600 --> 00:05:42,950
I prefer using lowercase, to save time. Webflow capitalizes automatically.
88

89
00:05:43,100 --> 00:05:44,540
I suggest using lowercase.
89

90
00:05:44,570 --> 00:05:49,370
It's faster to type. And also you'll see difference between styles that were created automatically, by
90

91
00:05:49,370 --> 00:05:51,710
Webflow, and those that you created and manually.
91

92
00:05:51,740 --> 00:05:52,000
All right.
92

93
00:05:52,010 --> 00:05:53,660
So what are the properties of our button?
93

94
00:05:53,660 --> 00:05:58,570
It had a white background with 20% opacity and 4 pixel rounded corners.
94

95
00:06:00,070 --> 00:06:03,970
This A, for Alpha, is how you can set the transparency on a color.
95

96
00:06:04,000 --> 00:06:11,230
Put 20 and there you go. The rounded corners have to be applied from here, under Border radius.
96

97
00:06:17,320 --> 00:06:23,410
Excellent. Let's fix the spacing now. Links in our designs are 30 pixel from the top edge.
97

98
00:06:23,470 --> 00:06:28,930
We can create this in Webflow in two ways, either by adding 30 pixel margin on top of the container,
98

99
00:06:28,990 --> 00:06:32,660
or adding a 30 pixel padding to the navbar itself.
99

100
00:06:32,680 --> 00:06:35,110
The result is the same thing, but second one is better.
100

101
00:06:35,110 --> 00:06:35,430
Why?
101

102
00:06:35,440 --> 00:06:38,940
Because container is a class that we are going to reuse elsewhere.
102

103
00:06:39,490 --> 00:06:41,250
So it's best to keep it intact.
103

104
00:06:41,290 --> 00:06:46,360
Navbar class, on the other hand, is going to be used only in the navbar so we can safely style it
104

105
00:06:46,450 --> 00:06:50,250
as we want. As you can see logo isn't centered.
105

106
00:06:50,290 --> 00:06:55,710
It's barely noticeable if you don't see the boundaries of the container, but we can't ignore such details.
106

107
00:06:55,720 --> 00:06:59,440
We want our websites to look pristine, a work of art.
107

108
00:06:59,440 --> 00:07:01,570
So how do we center the logo in the middle?
108

109
00:07:01,600 --> 00:07:06,770
Anytime you need to move or position something, always start by thinking margins and padding.
109

110
00:07:06,850 --> 00:07:09,560
These properties will cover majority of cases.
110

111
00:07:09,640 --> 00:07:12,730
We can just add a top margin on top of the logo and that's it.
111

112
00:07:18,520 --> 00:07:20,040
I'm just measuring with an eye here.
112

113
00:07:23,580 --> 00:07:26,780
our navigation links, don't have any hover effect on them right now.
113

114
00:07:26,780 --> 00:07:30,080
This makes the navbar dead and not very fun to interact with.
114

115
00:07:30,110 --> 00:07:34,910
Last time, we added an underlying border to the links, this time we can do something different, something
115

116
00:07:34,910 --> 00:07:36,950
simpler like change of color.
116

117
00:07:36,950 --> 00:07:39,860
Here's one of the simplest, quickest yet effective hover effect,
117

118
00:07:39,860 --> 00:07:42,620
you can use on many different interactive elements.
118

119
00:07:42,620 --> 00:07:44,560
Just change the opacity on hover.
119

120
00:07:44,570 --> 00:07:51,000
How do we apply the hover effect to elements? From hover state, which can be accessed right here.
120

121
00:07:51,020 --> 00:07:53,180
Let's change the opacity to 80%
121

122
00:07:58,840 --> 00:07:59,320
and there.
122

123
00:08:03,050 --> 00:08:05,270
This simple effect works on the bottom too.
123

124
00:08:05,690 --> 00:08:09,260
Let's add a transition effect, so the hover change is nice and smooth.
124

125
00:08:09,260 --> 00:08:14,040
This needs to be added on a regular state, not the hover state, but it will affect the hover.
125

126
00:08:14,040 --> 00:08:17,120
You'd expect that it's editable inside hover effect, but it's not.
126

127
00:08:17,120 --> 00:08:19,330
That's how CSS works in this case.
127

128
00:08:19,400 --> 00:08:21,070
There is probably a logic behind it.
128

129
00:08:26,900 --> 00:08:29,480
Let's test the desktop responsiveness. Not the mobile's,
129

130
00:08:29,490 --> 00:08:35,830
we'll do that in the end. The navbar is glued to the edges when we shrink the screen.
130

131
00:08:35,830 --> 00:08:37,710
So we need to add some padding to it.
131

132
00:08:43,810 --> 00:08:44,080
There.
132

133
00:08:44,080 --> 00:08:45,490
That's better. And that's it.
133

134
00:08:45,540 --> 00:08:46,770
Navbar is looking good.
134

135
00:08:46,780 --> 00:08:48,930
We'll finish the hero section in the next video.
135

136
00:08:48,940 --> 00:08:49,500
Stick around.