5/5

Preparing Your Vertical Header for Mobile.

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.

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Related Articles

Styling Your Fixed Vertical Header

In our previous post you create your very own Fixed Vertical Header so congratulations on accomplishing that task now its time to add some widgets to wow your visitors.…

How To Make A Fixed Vertical Header

Greetings all. For todays tutorial I am going to guide you through the process of creating a fixed vertical side header with just Elementor Pro and some crafty CSS. So let’s get the important stuff out the way so we…

Free Vertical Header Template

This is a vertical header template I built just to see how hard it would be. The template is built with 2 columns and some crafty CSS which you can find in each of the columns.…

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!

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

    • 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/

    Reply
    • Everything looks fine you did an awesome job.

Leave a Reply

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

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?