1
00:00:00,000 --> 00:00:03,890
Welcome to part two of redesigning
the responsive header.

2
00:00:03,885 --> 00:00:06,785
And I forgot to mention
in a previous video

3
00:00:06,780 --> 00:00:10,280
when I changed the signs
of the menu items in here,

4
00:00:10,275 --> 00:00:11,945
for some reason it seems to have

5
00:00:11,940 --> 00:00:13,410
affected the desktop version.

6
00:00:13,410 --> 00:00:14,610
You can see right now that

7
00:00:14,610 --> 00:00:17,610
the texts and no
longer uppercase,

8
00:00:17,610 --> 00:00:19,110
if something like this happens,

9
00:00:19,110 --> 00:00:23,720
just simply go back to
editing the homepage header.

10
00:00:23,715 --> 00:00:26,075
What you want to do
is just simply to go

11
00:00:26,070 --> 00:00:28,020
to the menu element.

12
00:00:28,020 --> 00:00:30,650
So I'm going to click on
many elements right here.

13
00:00:30,645 --> 00:00:34,225
Go to Style, go to
typography right here,

14
00:00:34,225 --> 00:00:36,235
and just click on it.

15
00:00:36,230 --> 00:00:37,520
That's all you can
see right here.

16
00:00:37,520 --> 00:00:38,810
It says Transform to uppercase.

17
00:00:38,810 --> 00:00:42,020
So we're basically
just reaffirming that,

18
00:00:42,020 --> 00:00:45,260
Hey, we do want the Let
us to be uppercase.

19
00:00:45,260 --> 00:00:47,480
So I'm gonna go ahead updates

20
00:00:47,480 --> 00:00:51,170
again and let's just go
back, view the page.

21
00:00:51,170 --> 00:00:54,620
Let us go to the homepage.

22
00:00:54,620 --> 00:00:56,420
Okay. And there you go.

23
00:00:56,420 --> 00:00:59,870
So honestly, I'm not quite
sure why that happens,

24
00:00:59,870 --> 00:01:02,090
but just in case it
does happen to you,

25
00:01:02,090 --> 00:01:04,900
just simply do what
I just did. Okay.

26
00:01:04,895 --> 00:01:07,795
Now, previously we
were able to get

27
00:01:07,790 --> 00:01:12,380
the tablet view to
look like this,

28
00:01:12,380 --> 00:01:14,180
which isn't bad at all.

29
00:01:14,180 --> 00:01:16,090
But now it is time
for us to take a look

30
00:01:16,085 --> 00:01:18,145
at the mobile view.

31
00:01:18,140 --> 00:01:20,120
And you can see right
now it looks really,

32
00:01:20,120 --> 00:01:22,420
really bad is plenty
of whitespace

33
00:01:22,415 --> 00:01:26,485
and the logo and the menu,

34
00:01:26,480 --> 00:01:28,910
the hamburger menu online,

35
00:01:28,910 --> 00:01:31,310
but we do need to
fix the whitespace.

36
00:01:31,309 --> 00:01:33,589
Now actually this is
the second time I am

37
00:01:33,590 --> 00:01:34,850
recording this particular video

38
00:01:34,850 --> 00:01:36,650
because in the previous one,

39
00:01:36,650 --> 00:01:38,470
I actually was able to fix

40
00:01:38,465 --> 00:01:41,545
the mobile header to have
the exact same kind of

41
00:01:41,540 --> 00:01:43,400
style there you will have

42
00:01:43,400 --> 00:01:46,280
the banner blending
into the background.

43
00:01:46,280 --> 00:01:51,770
However, I have decided to go
with a different route and

44
00:01:51,770 --> 00:01:56,330
instead use the same kind

45
00:01:56,330 --> 00:01:59,630
of header we have for
the rest of the pages,

46
00:01:59,630 --> 00:02:02,580
like the one here where you
have the black background,

47
00:02:02,584 --> 00:02:05,724
decided to use these header for

48
00:02:05,720 --> 00:02:09,500
the homepage head
out in mobile view.

49
00:02:09,499 --> 00:02:11,779
The reason why is because
I actually wanted to

50
00:02:11,780 --> 00:02:13,430
use this opportunity to show

51
00:02:13,430 --> 00:02:15,680
you a very cool trick that you

52
00:02:15,680 --> 00:02:18,410
can use whenever you're working
with responsive design.

53
00:02:18,410 --> 00:02:21,100
Let us go back to the homepage.

54
00:02:21,095 --> 00:02:23,395
And I want to show
you something, right?

55
00:02:23,390 --> 00:02:25,130
I'm gonna go to Edit with

56
00:02:25,130 --> 00:02:28,010
Elementor by editing
the homepage header.

57
00:02:28,010 --> 00:02:31,660
Here's the thing. Okay,
I'm gonna go ahead

58
00:02:31,655 --> 00:02:36,175
and duplicate this
header section.

59
00:02:36,170 --> 00:02:39,520
I'm going to right-click
in here. Duplicates.

60
00:02:39,515 --> 00:02:42,125
Basically now we
have two headers.

61
00:02:42,125 --> 00:02:45,355
Difference is, I'm
gonna come in here,

62
00:02:45,350 --> 00:02:47,680
go to this Edit section.

63
00:02:47,675 --> 00:02:49,725
I'm gonna go to style,

64
00:02:49,729 --> 00:02:53,959
background type, give
it a color of black.

65
00:02:53,960 --> 00:02:57,920
Okay, Now, check this out.

66
00:02:57,920 --> 00:02:59,740
I'm gonna go to Advanced,

67
00:02:59,735 --> 00:03:02,755
come down here to Responsive,

68
00:03:02,750 --> 00:03:06,970
and then invite here you
have visibility options.

69
00:03:06,965 --> 00:03:09,205
When exactly would
you like to show

70
00:03:09,200 --> 00:03:11,440
this section based
on a screen size?

71
00:03:11,435 --> 00:03:13,205
I'm going to hide it on desktop.

72
00:03:13,205 --> 00:03:14,465
Yes.

73
00:03:14,465 --> 00:03:15,965
We don't want to shoot
it on the desktop

74
00:03:15,965 --> 00:03:17,155
yet because we're still using

75
00:03:17,150 --> 00:03:19,790
the homepage header on tablet.

76
00:03:19,790 --> 00:03:21,910
We also want to
hide it until that.

77
00:03:21,905 --> 00:03:23,825
But then we want to show it

78
00:03:23,825 --> 00:03:26,855
when it gets to the mobile view.

79
00:03:26,855 --> 00:03:29,995
As such, I am now going to go to

80
00:03:29,990 --> 00:03:32,990
our original header
and do the opposite.

81
00:03:32,990 --> 00:03:36,370
Go to advanced, Calm
down hetero responsive,

82
00:03:36,365 --> 00:03:38,605
and then hide on desktop.

83
00:03:38,600 --> 00:03:39,920
Nobody want to show,

84
00:03:39,920 --> 00:03:41,260
we want to show until that.

85
00:03:41,255 --> 00:03:44,495
But when I go to Hide on Mobile,

86
00:03:44,495 --> 00:03:47,155
let me go ahead and now updates.

87
00:03:47,150 --> 00:03:48,790
And take a look at this.

88
00:03:48,785 --> 00:03:51,155
Let's go ahead now,
view the page.

89
00:03:51,155 --> 00:03:53,855
Let's go to the homepage.

90
00:03:53,920 --> 00:03:57,560
Okay, so you can see we
still have the same header.

91
00:03:57,560 --> 00:04:00,950
But now for the tablet view,

92
00:04:00,950 --> 00:04:02,720
you can see we still
have the same header,

93
00:04:02,720 --> 00:04:04,550
the same header at
the same header.

94
00:04:04,550 --> 00:04:08,890
Now, once it gets
to the mobile view,

95
00:04:08,885 --> 00:04:12,175
we now have the black
background with

96
00:04:12,170 --> 00:04:14,120
the logo idea of the center and

97
00:04:14,120 --> 00:04:16,480
then the hamburger
menu down there.

98
00:04:16,475 --> 00:04:18,415
And then we have the
homepage banner.

99
00:04:18,410 --> 00:04:19,640
And there you go.

100
00:04:19,640 --> 00:04:21,620
So this is one trick that you

101
00:04:21,620 --> 00:04:23,900
can use whenever you're working
with responsive design.

102
00:04:23,900 --> 00:04:25,340
You can choose to show

103
00:04:25,340 --> 00:04:27,920
a particular section on
specifically on desktop.

104
00:04:27,920 --> 00:04:30,320
And you can choose to
show particular section

105
00:04:30,320 --> 00:04:34,070
specifically only maybe
on tablet or on mobile.

106
00:04:34,070 --> 00:04:36,760
A question I might have
yet though is okay,

107
00:04:36,755 --> 00:04:39,455
why didn't I just simply

108
00:04:39,455 --> 00:04:44,695
duplicate this particular
header and then simply use

109
00:04:44,690 --> 00:04:48,970
that header on the homepage

110
00:04:48,965 --> 00:04:51,175
and then simply hide it

111
00:04:51,170 --> 00:04:53,950
on desktop and tablet and
then displayed on mobile.

112
00:04:53,945 --> 00:04:55,795
You can have two head

113
00:04:55,790 --> 00:04:59,600
does been displayed on
any page with elemental,

114
00:04:59,600 --> 00:05:01,840
at least that's how
this plug-in works.

115
00:05:01,835 --> 00:05:03,625
Okay, So if you are thinking,

116
00:05:03,620 --> 00:05:05,060
I'll just simply
duplicating this header

117
00:05:05,060 --> 00:05:06,710
and showing two headers
on the same page,

118
00:05:06,710 --> 00:05:08,620
hide one on desktops or
they don't want a mobile,

119
00:05:08,615 --> 00:05:10,835
it's not gonna work
because actually tried it.

120
00:05:10,835 --> 00:05:14,585
That's why I had to go
to the homepage header.

121
00:05:14,585 --> 00:05:16,015
And then on that same header,

122
00:05:16,010 --> 00:05:18,970
create a second
section which will now

123
00:05:18,965 --> 00:05:22,915
display specifically
on the mobile view.

124
00:05:22,910 --> 00:05:24,280
But we're not done.

125
00:05:24,275 --> 00:05:26,035
Actually want to
do something else.

126
00:05:26,030 --> 00:05:29,450
See, you don't always have
to go with this tomato.

127
00:05:29,450 --> 00:05:32,150
You have the logo and
the center on top,

128
00:05:32,150 --> 00:05:34,880
and then the hamburger
menu or below it.

129
00:05:34,880 --> 00:05:36,770
We can still use
two columns here.

130
00:05:36,770 --> 00:05:39,950
How to log on the left and
have the menu on the light.

131
00:05:39,950 --> 00:05:41,110
Let us do that.

132
00:05:41,105 --> 00:05:43,075
I'm gonna go back
edit with Elementor,

133
00:05:43,070 --> 00:05:48,730
the homepage header and

134
00:05:48,725 --> 00:05:53,135
pallets with for this page
to load, okay, some editing.

135
00:05:53,134 --> 00:05:55,054
The second header right now.

136
00:05:55,055 --> 00:05:57,625
But I'm going to switch
now to responsive mode.

137
00:05:57,620 --> 00:06:00,010
Let's go to the mobile view.

138
00:06:00,005 --> 00:06:04,805
All Kn has exactly what
we have. Right here.

139
00:06:04,805 --> 00:06:05,635
I'm gonna do this.

140
00:06:05,630 --> 00:06:07,070
I'm going to click on the column

141
00:06:07,070 --> 00:06:09,200
holding the logo. Right here.

142
00:06:09,200 --> 00:06:11,380
I'm gonna say 50.

143
00:06:11,375 --> 00:06:13,405
Then I'll come down here to

144
00:06:13,400 --> 00:06:15,520
the logo column
holding the logo,

145
00:06:15,515 --> 00:06:17,215
I'm sorry, all in
the menu either.

146
00:06:17,210 --> 00:06:19,700
And then change the one to 50 as

147
00:06:19,700 --> 00:06:22,820
well so that they
are side-by-side.

148
00:06:22,820 --> 00:06:24,800
Now, let's make some changes.

149
00:06:24,800 --> 00:06:27,020
I'm going to click
on the Edit menu,

150
00:06:27,020 --> 00:06:29,750
icon, come down, hits layout.

151
00:06:29,750 --> 00:06:31,880
Let's try to align to the white.

152
00:06:31,879 --> 00:06:34,329
And then we're
gonna make it big.

153
00:06:34,325 --> 00:06:36,205
Let's go over to style.

154
00:06:36,200 --> 00:06:37,720
Down here you will have

155
00:06:37,715 --> 00:06:40,615
the menu trigger and
close icon click inside.

156
00:06:40,610 --> 00:06:42,140
And now Icon Size,
I'm gonna make

157
00:06:42,140 --> 00:06:45,730
this one above 40 pixels.

158
00:06:45,725 --> 00:06:47,395
Keda should be big enough.

159
00:06:47,390 --> 00:06:48,620
And then for the logo,

160
00:06:48,620 --> 00:06:50,530
Let's edit the logo as well.

161
00:06:50,525 --> 00:06:52,465
Image size is set to full,

162
00:06:52,460 --> 00:06:53,750
aligned to the left.

163
00:06:53,750 --> 00:06:57,080
Let's go to style
max with a 100%.

164
00:06:57,080 --> 00:06:58,930
Okay, Let's go ahead now.

165
00:06:58,925 --> 00:07:01,805
Updates. Actually before
we do, let us hold.

166
00:07:01,805 --> 00:07:03,085
Let's also do this.

167
00:07:03,080 --> 00:07:05,980
When you click on
the hamburger menu.

168
00:07:05,975 --> 00:07:07,645
This is going to
be the job done.

169
00:07:07,640 --> 00:07:10,460
But you can see right now
that we can see the text.

170
00:07:10,460 --> 00:07:12,110
The text is all white,

171
00:07:12,110 --> 00:07:14,270
so we need to make
some changes in here.

172
00:07:14,270 --> 00:07:15,790
Here's exactly
what I'm gonna do.

173
00:07:15,785 --> 00:07:17,455
I'm gonna go to drop

174
00:07:17,450 --> 00:07:20,030
down on the sign
drop-down right here.

175
00:07:20,030 --> 00:07:21,880
And then background color.

176
00:07:21,875 --> 00:07:23,615
We're gonna go with black,

177
00:07:23,615 --> 00:07:26,485
text color, we're
gonna go with white.

178
00:07:26,480 --> 00:07:30,080
And that should be that.

179
00:07:30,080 --> 00:07:33,370
I don't know why we don't see
it here yet, but It's okay.

180
00:07:33,365 --> 00:07:35,395
I'm gonna go ahead updates.

181
00:07:35,390 --> 00:07:38,910
Let's go back, view the page.

182
00:07:39,760 --> 00:07:44,350
Go back to the homepage,
minimize the window.

183
00:07:44,345 --> 00:07:45,685
All right, so now
you can say, Okay,

184
00:07:45,685 --> 00:07:47,195
we've got the logo on the left,

185
00:07:47,195 --> 00:07:48,545
the menu on the white.

186
00:07:48,545 --> 00:07:51,565
Now if we click on the menu
right here, it opens up.

187
00:07:51,560 --> 00:07:56,350
Bobby still can't see the
text that is interested in.

188
00:07:56,345 --> 00:07:59,945
Okay, let's go back and see
what might have happened.

189
00:07:59,945 --> 00:08:03,155
And this is going to
be very interested in.

190
00:08:03,155 --> 00:08:05,525
I'm not quite sure why
we don't see the texts.

191
00:08:05,525 --> 00:08:06,805
All right. No worries.

192
00:08:06,800 --> 00:08:09,500
I'm gonna come in here
to responsive mode,

193
00:08:09,500 --> 00:08:11,110
switch back to Mobile.

194
00:08:11,105 --> 00:08:13,195
Click on the menu right here,

195
00:08:13,190 --> 00:08:14,900
click on the drop-down.

196
00:08:14,900 --> 00:08:17,230
Why don't we see the text?

197
00:08:17,225 --> 00:08:18,805
Let's go to style.

198
00:08:18,800 --> 00:08:23,840
Let's come down here
to typography and wow,

199
00:08:23,840 --> 00:08:27,530
I'm not entirely sure
why the size here

200
00:08:27,530 --> 00:08:30,800
instead to one, but
it shouldn't be one.

201
00:08:30,800 --> 00:08:34,010
It should be a little
bit bigger than one.

202
00:08:34,010 --> 00:08:36,260
That's a probably
faults in pixels.

203
00:08:36,260 --> 00:08:38,000
So my apologies, I'm going to

204
00:08:38,000 --> 00:08:42,110
tell issue why me one pixel,

205
00:08:42,110 --> 00:08:44,510
sometimes I feel
element is trying to

206
00:08:44,510 --> 00:08:47,120
prevent me from
making good videos.

207
00:08:47,120 --> 00:08:48,680
I, I honestly don't know why.

208
00:08:48,680 --> 00:08:49,760
It said won't pixel.

209
00:08:49,760 --> 00:08:51,740
That's just, that's
just bizarre.

210
00:08:51,740 --> 00:08:53,990
Anyways, you can see that at

211
00:08:53,990 --> 00:08:58,390
least the menu items
are now showing,

212
00:08:58,385 --> 00:09:00,835
Wow, that's very,
very interested in,

213
00:09:00,830 --> 00:09:02,270
I'm telling you web
design can be a very

214
00:09:02,270 --> 00:09:05,120
strange, very
strange occupations.

215
00:09:05,120 --> 00:09:06,290
Sometimes you feel, you

216
00:09:06,290 --> 00:09:07,790
feel like all these
elements have in mind

217
00:09:07,790 --> 00:09:11,300
that they won't go back.

218
00:09:11,300 --> 00:09:13,420
All right, so now
I click in here.

219
00:09:13,415 --> 00:09:14,215
There it goes.

220
00:09:14,210 --> 00:09:16,000
Now you can see I've
got the menu items

221
00:09:15,995 --> 00:09:18,225
and of course you can now close.

222
00:09:18,229 --> 00:09:20,509
So that's basically it

223
00:09:20,510 --> 00:09:22,750
for redesigning the
responsive header.

224
00:09:22,745 --> 00:09:24,085
I'm actually going
to go ahead and do

225
00:09:24,080 --> 00:09:25,660
the exact same thing for

226
00:09:25,655 --> 00:09:28,765
the global header
for the mobile view,

227
00:09:28,760 --> 00:09:32,420
where I will make the first
column 50% and then make

228
00:09:32,420 --> 00:09:36,320
the second column holding the
menu item are 50% as well.

229
00:09:36,320 --> 00:09:38,210
And also make the menu

230
00:09:38,210 --> 00:09:39,950
hamburger icon a
little bit bigger.

231
00:09:39,950 --> 00:09:42,980
So you can go ahead
and do that as well.

232
00:09:42,980 --> 00:09:45,230
But that's it for creating the

233
00:09:45,230 --> 00:09:47,300
responsive or headers
for the website.

234
00:09:47,300 --> 00:09:48,920
Thank you for
watching German event

235
00:09:48,920 --> 00:09:50,800
next video where we'll
now take a look at

236
00:09:50,795 --> 00:09:52,885
redesigning the footer to

237
00:09:52,880 --> 00:09:56,460
be a bit more
responsible. So you then.