Preparing Your Vertical Header for Mobile.

Difficulty Rating :
Written byAires DaGraca

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.

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.

Was this article helpful?

Awesome, follow us on Twitter or Like us on Facebook

Disclosure: Some of the links above are affiliate links meaning at no additional cost to you, I will earn a commission if you click through and make a purchase.

6 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!

    Reply
    • 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;
      }

      Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

By visiting iHeartElementor.com you accept our use of cookies and agree to our privacy policy.

Hello, would you like to take a survey before you leave.

Your answers will help us provide more and useful content.
Thank you for your time.