All right, So let's begin to
design our header to be responsive
and Lambda show you the states as it is right now.
Desktop is pretty much done.
When we begin to minimize the screen of our browser.
You can see now that at this point
this would be the tablet view.
And you can see that the logo becomes lot smaller.
The menu has also transformed into
the traditional hamburger menu.
And it's okay, but it can definitely be improved.
But then if we go a little bit smaller now you can
see this is where things look really, really bad.
This is the mobile view,
the one for the mobile phone.
So we needed to make
some changes in here. I'm gonna go ahead.
And actually before I do that,
let me show you the other header, the global header.
Let's go to the contact page and you will
notice that this one is a little bit better.
We have the black background and then on mobile view,
even though the hamburger menu
is misaligned with the logo,
it's still much better because we don't have
any white space at the top.
Alright, I'm gonna go ahead and
edit the homepage headers.
Let's go to Edit with Elementor
and then homepage head up.
Now we're gonna switch to the responsive mode down here.
Responsive mode, Let's switch to table it first.
Now, I want to show you something real quick.
All right, let me go back to responsive.
By default, your main menu or
a featured menu enabled turned into
the hamburger menu on tablet view,
however, note that you
don't always have to follow the default settings.
Right now if I switch to table, as you can see,
it has turned to the hamburger menu.
And that's because if I was to click and
edit the main menu on the layout,
you will see the US positive
breakpoint tablet screen sizes
of 1025 pixels and below.
Sure, the hamburger menu blot.
If we don't want to do that,
I'm gonna switch this one to the mobile view, instead.
A tablet view. We will still have
the main menu showing and we
only transform to the hamburger menu
once we reach the mobile view.
Let's go ahead update.
And let's see what this little,
little change has done for us.
View the page. Go back to the homepage or case.
So now at this point,
this is tablet view.
And you can see that it's actually not that bad.
You don't have to switch to the mobile,
to the hamburger menu once, which is tablets.
Of course, if you had many menu items,
say 678 items than years,
obviously you won't have enough space.
But institutions where you've got like
four or five menu items,
it's perfectly fine for its display.
Them as they are in the tablet mode.
There's two changes I'm going to do in here.
One would be to increase
the size of the logo just a little bit.
And then we could also try to reduce the size of
the menu items just a little bit.
Let's do this real quick. I'm gonna go
back to the homepage header.
We're going to switch to respond SUV, tip tablet.
Alright. I'm gonna click on the menu.
I'm sorry, the logo either here at UT logo go to Style.
Now notice right now
that the dimension in here has been set to tablet.
As you can see, it's all SASE tablet, tablet.
So here I'm going to switch the size to 100%.
We're gonna show the full size of the logo.
Now for the main menu,
I know it's all in white.
You can't see, but just bear with me.
I'm going to click on edit,
the main menu, go to style.
Then we're gonna go to typography right here.
Now, watch this, makes sure
the size here is set to tablet.
We're gonna make this 114 pixels
just a little bit smaller than usual.
Let's updates.
Now let's take a look.
Add the new homepage header and responsive mode.
And there you go.
There you go.
So up until this point, it's looking quite good.
Obviously, we're gonna make some major changes
to the banner headline,
the winner we're traveling, It's adventure.
We're going to reduce the size,
but just pay attention to the actual header.
Okay, it looks good up until the mobile view,
which will now have to walk on.
But for now tailored wise,
this is looking quite good.
Let's now take a look at
the header for the global, global header.
Let's pick a page, Let's pick the Articles page.
And from here we're going to go ahead to
edit the Global Header.
We're going to handle the tablet mode first.
So let's come down here to your responsive. Go to tablet.
Alright, we're going to handle the bread points.
We're going to switch that one to mobile.
And it will just do the exact same thing
for the style as well.
We're going to align to the right,
for the main menu,
alignment to the white and then the style.
We're gonna come down here to typography.
Make sure this is set to tablet.
So we'll go with 14 pixels as well.
And there it is.
Okay, Next is going to be the logo.
Let's not forget, we need to make the logo or 100%.
Make sure this is set to tablets.
100%, fine.
Now we're going to switch to the mobile view.
The only thing we need to do right here would be to
outline the navigation menu to the center.
Actually, we shouldn't have touched
the alignments in the tablet mode,
so it's okay, we'll just set this back.
I'm going to go to Content Layout
and then the alignment here.
Let's just keep it on the center.
I think they'll be better.
All right. That is it.
I'm gonna go ahead and I'll update.
Let's take a look at what we have.
Let's view the page.
Let's pick the Articles page.
Reduce the size. What do we have in here?
All right, Is tablet,
tablet is looking good.
And now here this is going to be the mobile view,
but there seems to be a misalignment
with the logo and then the menu itself.
So let's quickly fix that.
Let's go back.
We need to make the logo actually
maybe a little bit smaller.
I think it's a little bit too big as well.
So let's make those changes.
Go back to responsive mobile.
Okay, let's edit the logo first alignment here,
let's set it to the center.
Let's say this one is a dissenter.
And then maybe the size,
maybe a 100% is a bit too large, not thinking about it.
So let's bring this down to 75%.
Let's go ahead and dates.
And let's see what this will look like.
Let us go back view the page.
Article. I minimize, okay,
Much better now and now you can see
the alignment is at the center.
And there it is.
So looking much better,
much better right now.
Of course, there are still gonna make some more,
a few more changes to the headers,
but for now at least it's looking a
lot better than what we had initially.
Both the homepage header
and the Global Header are looking better.
We will handle the whitespace in,
in the homepage header in the next video.