Welcome to part two of redesigning the responsive header.
And I forgot to mention in a previous video
when I changed the signs of the menu items in here,
for some reason it seems to have
affected the desktop version.
You can see right now that
the texts and no longer uppercase,
if something like this happens,
just simply go back to editing the homepage header.
What you want to do is just simply to go
to the menu element.
So I'm going to click on many elements right here.
Go to Style, go to typography right here,
and just click on it.
That's all you can see right here.
It says Transform to uppercase.
So we're basically just reaffirming that,
Hey, we do want the Let us to be uppercase.
So I'm gonna go ahead updates
again and let's just go back, view the page.
Let us go to the homepage.
Okay. And there you go.
So honestly, I'm not quite sure why that happens,
but just in case it does happen to you,
just simply do what I just did. Okay.
Now, previously we were able to get
the tablet view to look like this,
which isn't bad at all.
But now it is time for us to take a look
at the mobile view.
And you can see right now it looks really,
really bad is plenty of whitespace
and the logo and the menu,
the hamburger menu online,
but we do need to fix the whitespace.
Now actually this is the second time I am
recording this particular video
because in the previous one,
I actually was able to fix
the mobile header to have the exact same kind of
style there you will have
the banner blending into the background.
However, I have decided to go with a different route and
instead use the same kind
of header we have for the rest of the pages,
like the one here where you have the black background,
decided to use these header for
the homepage head out in mobile view.
The reason why is because I actually wanted to
use this opportunity to show
you a very cool trick that you
can use whenever you're working with responsive design.
Let us go back to the homepage.
And I want to show you something, right?
I'm gonna go to Edit with
Elementor by editing the homepage header.
Here's the thing. Okay, I'm gonna go ahead
and duplicate this header section.
I'm going to right-click in here. Duplicates.
Basically now we have two headers.
Difference is, I'm gonna come in here,
go to this Edit section.
I'm gonna go to style,
background type, give it a color of black.
Okay, Now, check this out.
I'm gonna go to Advanced,
come down here to Responsive,
and then invite here you have visibility options.
When exactly would you like to show
this section based on a screen size?
I'm going to hide it on desktop.
Yes.
We don't want to shoot it on the desktop
yet because we're still using
the homepage header on tablet.
We also want to hide it until that.
But then we want to show it
when it gets to the mobile view.
As such, I am now going to go to
our original header and do the opposite.
Go to advanced, Calm down hetero responsive,
and then hide on desktop.
Nobody want to show,
we want to show until that.
But when I go to Hide on Mobile,
let me go ahead and now updates.
And take a look at this.
Let's go ahead now, view the page.
Let's go to the homepage.
Okay, so you can see we still have the same header.
But now for the tablet view,
you can see we still have the same header,
the same header at the same header.
Now, once it gets to the mobile view,
we now have the black background with
the logo idea of the center and
then the hamburger menu down there.
And then we have the homepage banner.
And there you go.
So this is one trick that you
can use whenever you're working with responsive design.
You can choose to show
a particular section on specifically on desktop.
And you can choose to show particular section
specifically only maybe on tablet or on mobile.
A question I might have yet though is okay,
why didn't I just simply
duplicate this particular header and then simply use
that header on the homepage
and then simply hide it
on desktop and tablet and then displayed on mobile.
You can have two head
does been displayed on any page with elemental,
at least that's how this plug-in works.
Okay, So if you are thinking,
I'll just simply duplicating this header
and showing two headers on the same page,
hide one on desktops or they don't want a mobile,
it's not gonna work because actually tried it.
That's why I had to go to the homepage header.
And then on that same header,
create a second section which will now
display specifically on the mobile view.
But we're not done.
Actually want to do something else.
See, you don't always have to go with this tomato.
You have the logo and the center on top,
and then the hamburger menu or below it.
We can still use two columns here.
How to log on the left and have the menu on the light.
Let us do that.
I'm gonna go back edit with Elementor,
the homepage header and
pallets with for this page to load, okay, some editing.
The second header right now.
But I'm going to switch now to responsive mode.
Let's go to the mobile view.
All Kn has exactly what we have. Right here.
I'm gonna do this.
I'm going to click on the column
holding the logo. Right here.
I'm gonna say 50.
Then I'll come down here to
the logo column holding the logo,
I'm sorry, all in the menu either.
And then change the one to 50 as
well so that they are side-by-side.
Now, let's make some changes.
I'm going to click on the Edit menu,
icon, come down, hits layout.
Let's try to align to the white.
And then we're gonna make it big.
Let's go over to style.
Down here you will have
the menu trigger and close icon click inside.
And now Icon Size, I'm gonna make
this one above 40 pixels.
Keda should be big enough.
And then for the logo,
Let's edit the logo as well.
Image size is set to full,
aligned to the left.
Let's go to style max with a 100%.
Okay, Let's go ahead now.
Updates. Actually before we do, let us hold.
Let's also do this.
When you click on the hamburger menu.
This is going to be the job done.
But you can see right now that we can see the text.
The text is all white,
so we need to make some changes in here.
Here's exactly what I'm gonna do.
I'm gonna go to drop
down on the sign drop-down right here.
And then background color.
We're gonna go with black,
text color, we're gonna go with white.
And that should be that.
I don't know why we don't see it here yet, but It's okay.
I'm gonna go ahead updates.
Let's go back, view the page.
Go back to the homepage, minimize the window.
All right, so now you can say, Okay,
we've got the logo on the left,
the menu on the white.
Now if we click on the menu right here, it opens up.
Bobby still can't see the text that is interested in.
Okay, let's go back and see what might have happened.
And this is going to be very interested in.
I'm not quite sure why we don't see the texts.
All right. No worries.
I'm gonna come in here to responsive mode,
switch back to Mobile.
Click on the menu right here,
click on the drop-down.
Why don't we see the text?
Let's go to style.
Let's come down here to typography and wow,
I'm not entirely sure why the size here
instead to one, but it shouldn't be one.
It should be a little bit bigger than one.
That's a probably faults in pixels.
So my apologies, I'm going to
tell issue why me one pixel,
sometimes I feel element is trying to
prevent me from making good videos.
I, I honestly don't know why.
It said won't pixel.
That's just, that's just bizarre.
Anyways, you can see that at
least the menu items are now showing,
Wow, that's very, very interested in,
I'm telling you web design can be a very
strange, very strange occupations.
Sometimes you feel, you
feel like all these elements have in mind
that they won't go back.
All right, so now I click in here.
There it goes.
Now you can see I've got the menu items
and of course you can now close.
So that's basically it
for redesigning the responsive header.
I'm actually going to go ahead and do
the exact same thing for
the global header for the mobile view,
where I will make the first column 50% and then make
the second column holding the menu item are 50% as well.
And also make the menu
hamburger icon a little bit bigger.
So you can go ahead and do that as well.
But that's it for creating the
responsive or headers for the website.
Thank you for watching German event
next video where we'll now take a look at
redesigning the footer to
be a bit more responsible. So you then.