Evening all,
This brief post is a follow up to “How to make a fixed vertical header” and “Styling your vertical header”. If you have followed the previous posts then you should have a pretty nice vertical header with your desired styling. The one thing I neglected to included was how to make it look awesome on mobile so that is what we are going to solve in this post.
As you have noticed the vertical header is still present on mobile so we need to fix this.
Open up your vertical header template.
Now we need to design a header that will only be visible on mobile and tablet devices. For this instance I am just going to choose one from the available header templates.
Don’t forget to hide your mobile header on desktop.
Save your template and open up your customizer.
For some strange reason when I tried to hide the vertical header using the responsive settings in elementor they didn’t seem to work so I was forced to use a media query.
Open up your customizer and apply this media query. This query will hide the vertical header when the browser gets below 1025px.
@media (max-width: 1025px){
#go_vertical {
display: none;
}
}
Please note that if you added a margin to your page-content and footer you will need to add this under your media query as well. So it would look like this :
@media (max-width: 1025px){
#go_vertical {
display: none;
}
.page-content, footer {
margin-left: 0px!important;
}
}
I hope this helps if you have any questions please leave them below.
8 Comments
Hi!
This is helpful! Thank you!
I still have a problem with footer align on mobile. Please take a look at eren .ro. Footer is pushed to the right.
Thank you!
Looks like you used some additional css for your footer under this section id .elementor-2413
you have 350px margin for that section.
I suggest you remove that css and include that class in place of footer.
should look something like this
.page-content,
.elementor-2413 {
margin-left: 350px;
}
@media (max-width: 1025px)
.page-content,
.elementor-2413 {
margin-left: 0px!important;
}
Love the site 👍🏻.
Thank you!
Indeed it was a margin of 350px added in footer styling.
Do you see that right side space on your phone? I do not know why it appears because everywhere I set the dimensions correctly in CSS
https://imgur.com/a/1S3RCxF
Sorry Lara I don’t see anything like that on my phone. (iPhone X)
I have follow the instruction given in your site. But at one point i got stucked. The vertical menu and its item goes off in mobile but the background don’t. Could u please help in this regard?
Also i dont want the footer in the below home page. How?
I use Astra and Elementor Pro.
https://www.sahamanojphotography.com/blacksilver/
Everything looks fine you did an awesome job.