1
00:00:00,000 --> 00:00:01,200
All right, So let's begin to

2
00:00:01,200 --> 00:00:03,600
design our header
to be responsive

3
00:00:03,600 --> 00:00:08,330
and Lambda show you the
states as it is right now.

4
00:00:08,325 --> 00:00:11,795
Desktop is pretty much done.

5
00:00:11,790 --> 00:00:15,260
When we begin to minimize
the screen of our browser.

6
00:00:15,255 --> 00:00:16,865
You can see now
that at this point

7
00:00:16,860 --> 00:00:18,390
this would be the tablet view.

8
00:00:18,390 --> 00:00:21,600
And you can see that the
logo becomes lot smaller.

9
00:00:21,600 --> 00:00:23,790
The menu has also
transformed into

10
00:00:23,790 --> 00:00:26,940
the traditional hamburger menu.

11
00:00:26,940 --> 00:00:32,400
And it's okay, but it can
definitely be improved.

12
00:00:32,395 --> 00:00:34,975
But then if we go a little
bit smaller now you can

13
00:00:34,970 --> 00:00:37,450
see this is where things
look really, really bad.

14
00:00:37,445 --> 00:00:38,545
This is the mobile view,

15
00:00:38,540 --> 00:00:40,070
the one for the mobile phone.

16
00:00:40,070 --> 00:00:41,330
So we needed to make

17
00:00:41,330 --> 00:00:43,370
some changes in here.
I'm gonna go ahead.

18
00:00:43,370 --> 00:00:45,110
And actually before I do that,

19
00:00:45,110 --> 00:00:48,670
let me show you the other
header, the global header.

20
00:00:48,665 --> 00:00:51,565
Let's go to the contact
page and you will

21
00:00:51,560 --> 00:00:54,970
notice that this one is
a little bit better.

22
00:00:54,965 --> 00:00:57,835
We have the black background
and then on mobile view,

23
00:00:57,830 --> 00:00:59,900
even though the hamburger menu

24
00:00:59,900 --> 00:01:01,580
is misaligned with the logo,

25
00:01:01,580 --> 00:01:03,410
it's still much better
because we don't have

26
00:01:03,410 --> 00:01:06,340
any white space at the top.

27
00:01:06,335 --> 00:01:08,425
Alright, I'm gonna go ahead and

28
00:01:08,420 --> 00:01:10,910
edit the homepage headers.

29
00:01:10,905 --> 00:01:12,645
Let's go to Edit with Elementor

30
00:01:12,649 --> 00:01:14,639
and then homepage head up.

31
00:01:14,640 --> 00:01:18,720
Now we're gonna switch to the
responsive mode down here.

32
00:01:18,715 --> 00:01:21,645
Responsive mode, Let's
switch to table it first.

33
00:01:21,640 --> 00:01:24,000
Now, I want to show you
something real quick.

34
00:01:23,995 --> 00:01:26,695
All right, let me go
back to responsive.

35
00:01:26,695 --> 00:01:29,685
By default, your main menu or

36
00:01:29,680 --> 00:01:31,060
a featured menu
enabled turned into

37
00:01:31,060 --> 00:01:33,070
the hamburger menu
on tablet view,

38
00:01:33,070 --> 00:01:36,820
however, note that you

39
00:01:36,820 --> 00:01:39,570
don't always have to follow
the default settings.

40
00:01:39,565 --> 00:01:42,195
Right now if I switch to
table, as you can see,

41
00:01:42,190 --> 00:01:44,890
it has turned to
the hamburger menu.

42
00:01:44,890 --> 00:01:47,580
And that's because if
I was to click and

43
00:01:47,575 --> 00:01:50,575
edit the main menu
on the layout,

44
00:01:50,575 --> 00:01:51,975
you will see the US positive

45
00:01:51,970 --> 00:01:55,180
breakpoint tablet screen sizes

46
00:01:55,180 --> 00:01:57,390
of 1025 pixels and below.

47
00:01:57,390 --> 00:02:01,310
Sure, the hamburger menu blot.

48
00:02:01,310 --> 00:02:02,690
If we don't want to do that,

49
00:02:02,690 --> 00:02:07,400
I'm gonna switch this one to
the mobile view, instead.

50
00:02:07,400 --> 00:02:09,680
A tablet view. We
will still have

51
00:02:09,680 --> 00:02:11,620
the main menu showing and we

52
00:02:11,615 --> 00:02:13,165
only transform to
the hamburger menu

53
00:02:13,160 --> 00:02:15,290
once we reach the mobile view.

54
00:02:15,290 --> 00:02:16,910
Let's go ahead update.

55
00:02:16,910 --> 00:02:18,280
And let's see what this little,

56
00:02:18,275 --> 00:02:20,035
little change has done for us.

57
00:02:20,030 --> 00:02:28,310
View the page. Go back
to the homepage or case.

58
00:02:28,310 --> 00:02:29,480
So now at this point,

59
00:02:29,480 --> 00:02:30,920
this is tablet view.

60
00:02:30,920 --> 00:02:34,240
And you can see that it's
actually not that bad.

61
00:02:34,235 --> 00:02:37,025
You don't have to
switch to the mobile,

62
00:02:37,025 --> 00:02:39,595
to the hamburger menu
once, which is tablets.

63
00:02:39,590 --> 00:02:42,230
Of course, if you
had many menu items,

64
00:02:42,230 --> 00:02:44,810
say 678 items than years,

65
00:02:44,810 --> 00:02:47,210
obviously you won't
have enough space.

66
00:02:47,210 --> 00:02:48,860
But institutions
where you've got like

67
00:02:48,860 --> 00:02:50,870
four or five menu items,

68
00:02:50,870 --> 00:02:53,300
it's perfectly fine
for its display.

69
00:02:53,300 --> 00:02:57,250
Them as they are in
the tablet mode.

70
00:02:57,245 --> 00:02:59,155
There's two changes I'm
going to do in here.

71
00:02:59,150 --> 00:03:00,560
One would be to increase

72
00:03:00,560 --> 00:03:02,630
the size of the logo
just a little bit.

73
00:03:02,630 --> 00:03:04,850
And then we could also
try to reduce the size of

74
00:03:04,850 --> 00:03:07,420
the menu items
just a little bit.

75
00:03:07,415 --> 00:03:08,815
Let's do this real
quick. I'm gonna go

76
00:03:08,810 --> 00:03:11,070
back to the homepage header.

77
00:03:12,220 --> 00:03:16,400
We're going to switch to
respond SUV, tip tablet.

78
00:03:16,400 --> 00:03:18,680
Alright. I'm gonna
click on the menu.

79
00:03:18,680 --> 00:03:22,700
I'm sorry, the logo either
here at UT logo go to Style.

80
00:03:22,700 --> 00:03:24,760
Now notice right now

81
00:03:24,755 --> 00:03:27,475
that the dimension in here
has been set to tablet.

82
00:03:27,470 --> 00:03:29,630
As you can see, it's all
SASE tablet, tablet.

83
00:03:29,630 --> 00:03:34,270
So here I'm going to
switch the size to 100%.

84
00:03:34,265 --> 00:03:36,955
We're gonna show the
full size of the logo.

85
00:03:36,950 --> 00:03:38,810
Now for the main menu,

86
00:03:38,810 --> 00:03:40,100
I know it's all in white.

87
00:03:40,100 --> 00:03:41,690
You can't see, but
just bear with me.

88
00:03:41,690 --> 00:03:43,060
I'm going to click on edit,

89
00:03:43,055 --> 00:03:45,265
the main menu, go to style.

90
00:03:45,260 --> 00:03:48,380
Then we're gonna go to
typography right here.

91
00:03:48,380 --> 00:03:50,300
Now, watch this, makes sure

92
00:03:50,300 --> 00:03:52,450
the size here is set to tablet.

93
00:03:52,445 --> 00:03:54,745
We're gonna make this 114 pixels

94
00:03:54,740 --> 00:03:57,020
just a little bit
smaller than usual.

95
00:03:57,020 --> 00:03:58,880
Let's updates.

96
00:03:58,880 --> 00:04:01,200
Now let's take a look.

97
00:04:01,200 --> 00:04:05,280
Add the new homepage header
and responsive mode.

98
00:04:05,275 --> 00:04:07,975
And there you go.

99
00:04:07,975 --> 00:04:09,315
There you go.

100
00:04:09,310 --> 00:04:13,000
So up until this point,
it's looking quite good.

101
00:04:13,000 --> 00:04:14,590
Obviously, we're gonna
make some major changes

102
00:04:14,590 --> 00:04:16,930
to the banner headline,

103
00:04:16,930 --> 00:04:18,640
the winner we're
traveling, It's adventure.

104
00:04:18,640 --> 00:04:19,930
We're going to reduce the size,

105
00:04:19,930 --> 00:04:22,810
but just pay attention
to the actual header.

106
00:04:22,810 --> 00:04:25,690
Okay, it looks good up
until the mobile view,

107
00:04:25,690 --> 00:04:27,460
which will now have to walk on.

108
00:04:27,460 --> 00:04:29,160
But for now tailored wise,

109
00:04:29,155 --> 00:04:31,045
this is looking quite good.

110
00:04:31,045 --> 00:04:32,535
Let's now take a look at

111
00:04:32,530 --> 00:04:35,610
the header for the
global, global header.

112
00:04:35,605 --> 00:04:38,005
Let's pick a page, Let's
pick the Articles page.

113
00:04:38,005 --> 00:04:39,435
And from here we're
going to go ahead to

114
00:04:39,430 --> 00:04:41,400
edit the Global Header.

115
00:04:41,395 --> 00:04:44,845
We're going to handle
the tablet mode first.

116
00:04:44,840 --> 00:04:48,800
So let's come down here to
your responsive. Go to tablet.

117
00:04:48,800 --> 00:04:51,760
Alright, we're going to
handle the bread points.

118
00:04:51,755 --> 00:04:54,465
We're going to switch
that one to mobile.

119
00:04:54,469 --> 00:04:56,299
And it will just do
the exact same thing

120
00:04:56,300 --> 00:04:58,970
for the style as well.

121
00:04:58,970 --> 00:05:01,640
We're going to
align to the right,

122
00:05:01,640 --> 00:05:03,800
for the main menu,

123
00:05:03,800 --> 00:05:05,830
alignment to the white
and then the style.

124
00:05:05,825 --> 00:05:08,305
We're gonna come down
here to typography.

125
00:05:08,300 --> 00:05:10,080
Make sure this is set to tablet.

126
00:05:10,075 --> 00:05:13,195
So we'll go with
14 pixels as well.

127
00:05:13,190 --> 00:05:15,040
And there it is.

128
00:05:15,035 --> 00:05:17,755
Okay, Next is going
to be the logo.

129
00:05:17,750 --> 00:05:21,380
Let's not forget, we need
to make the logo or 100%.

130
00:05:21,380 --> 00:05:23,360
Make sure this is
set to tablets.

131
00:05:23,360 --> 00:05:25,830
100%, fine.

132
00:05:25,830 --> 00:05:29,820
Now we're going to switch
to the mobile view.

133
00:05:29,815 --> 00:05:32,805
The only thing we need to
do right here would be to

134
00:05:32,800 --> 00:05:37,860
outline the navigation
menu to the center.

135
00:05:37,855 --> 00:05:39,705
Actually, we shouldn't
have touched

136
00:05:39,700 --> 00:05:41,950
the alignments in
the tablet mode,

137
00:05:41,950 --> 00:05:45,180
so it's okay, we'll
just set this back.

138
00:05:45,175 --> 00:05:47,535
I'm going to go
to Content Layout

139
00:05:47,530 --> 00:05:48,870
and then the alignment here.

140
00:05:48,865 --> 00:05:50,115
Let's just keep
it on the center.

141
00:05:50,110 --> 00:05:52,080
I think they'll be better.

142
00:05:52,075 --> 00:05:53,295
All right. That is it.

143
00:05:53,290 --> 00:05:55,350
I'm gonna go ahead
and I'll update.

144
00:05:55,345 --> 00:05:57,015
Let's take a look
at what we have.

145
00:05:57,010 --> 00:05:59,140
Let's view the page.

146
00:05:59,140 --> 00:06:03,080
Let's pick the Articles page.

147
00:06:03,420 --> 00:06:07,380
Reduce the size. What
do we have in here?

148
00:06:07,375 --> 00:06:09,225
All right, Is tablet,

149
00:06:09,220 --> 00:06:10,820
tablet is looking good.

150
00:06:10,824 --> 00:06:16,034
And now here this is going
to be the mobile view,

151
00:06:16,030 --> 00:06:18,460
but there seems to
be a misalignment

152
00:06:18,460 --> 00:06:20,950
with the logo and
then the menu itself.

153
00:06:20,950 --> 00:06:23,100
So let's quickly fix that.

154
00:06:23,095 --> 00:06:24,795
Let's go back.

155
00:06:24,790 --> 00:06:26,440
We need to make
the logo actually

156
00:06:26,440 --> 00:06:27,700
maybe a little bit smaller.

157
00:06:27,700 --> 00:06:29,650
I think it's a little
bit too big as well.

158
00:06:29,650 --> 00:06:31,390
So let's make those changes.

159
00:06:31,390 --> 00:06:34,020
Go back to responsive mobile.

160
00:06:34,015 --> 00:06:37,455
Okay, let's edit the logo
first alignment here,

161
00:06:37,450 --> 00:06:39,150
let's set it to the center.

162
00:06:39,145 --> 00:06:41,275
Let's say this one
is a dissenter.

163
00:06:41,275 --> 00:06:42,885
And then maybe the size,

164
00:06:42,880 --> 00:06:45,880
maybe a 100% is a bit too
large, not thinking about it.

165
00:06:45,880 --> 00:06:50,510
So let's bring this down to 75%.

166
00:06:50,505 --> 00:06:52,835
Let's go ahead and dates.

167
00:06:52,835 --> 00:06:54,295
And let's see what
this will look like.

168
00:06:54,290 --> 00:06:56,820
Let us go back view the page.

169
00:06:57,010 --> 00:07:02,170
Article. I minimize, okay,

170
00:07:02,165 --> 00:07:03,595
Much better now and
now you can see

171
00:07:03,590 --> 00:07:05,710
the alignment is at the center.

172
00:07:05,705 --> 00:07:07,915
And there it is.

173
00:07:07,910 --> 00:07:09,740
So looking much better,

174
00:07:09,740 --> 00:07:11,420
much better right now.

175
00:07:11,420 --> 00:07:13,970
Of course, there are still
gonna make some more,

176
00:07:13,970 --> 00:07:15,920
a few more changes
to the headers,

177
00:07:15,920 --> 00:07:18,350
but for now at least
it's looking a

178
00:07:18,350 --> 00:07:21,230
lot better than what
we had initially.

179
00:07:21,230 --> 00:07:23,590
Both the homepage header

180
00:07:23,585 --> 00:07:26,725
and the Global Header
are looking better.

181
00:07:26,720 --> 00:07:29,600
We will handle the
whitespace in,

182
00:07:29,600 --> 00:07:32,760
in the homepage header
in the next video.