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.
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 :
I hope this helps if you have any questions please leave them below.