How To Make A Fixed Vertical Header

Difficulty Rating :
Written byAires DaGraca
Last Updated – 8/26/2019

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 can begin.

My working environment

Theme: Hello Theme

Elementor Version: Pro

Let’s get started 😀

Before we begin let me say that there is no right or wrong way to achieve what I am about to show you. I have created vertical headers countless times and this is the best way that I have found to achieve the look and feel of something very polished and functional.

With that being said let’s begin.

First thing we need to do is go to Templates > Theme Builder and create a new header. Name the header what ever you like I will be using something descriptive for my name.

Once you hit the create template button you will be greeted by a library popup box, just close it because it will not be of any use to us.

Next you need to hit the plus icon and select the one column option.

Customizing the Section.

Now we need to set up our section that is holding our single column. Open up the section option and apple these settings in the layout and advanced tabs of the section.

Layout Tab
Advanced Tab

Important: Be sure to give the section a random color so that you will be able to seat on the front end. Visit the style tab and just pick a color you can change it later.

Customizing the Column.

For the column all we will be adding is a CSS class to help us target it later.

If you have done everything correctly your screen should be filled with the solid color you have chosen.

Publish your header and select entire site for the display option. Visit your front page or any page on your site and you should see nothing but a pull page of color with any content you may have below it.

As a side note if you have not done so already beside to hide the page titles so that it doesn’t interfere with the look you are trying to achieve.

Adding the CSS magic.

Now its time for the fun stuff open up the customizer and select Additional CSS and apply the following.

The changes should be instant and should look similar to the image below with the color you have chosen as your section background.

If you are wondering why we needed to make the column height 100vh it is so when we start adding widget and other items to it we can use some of the Flexbox options but we will cover that in the next post titled Styling Your Vertical Header.

Look & Feel

Depending on the type of look your are going for you have a couple options when it comes to placement. You can have it sit on top of your other content or sit beside it the choice is yours.

They both can produce a stunning effect. For example if you lower the opacity on the section background it can provide a nice yet subtle overlay effect. See image below.

The majority of the time I prefer to have my vertical header beside my content.

To do this I slide the footer and content over equal to the size of the vertical header. In this case I would add 250px margin to the left hand side with css wrapped in a media query so that it is only visible on large screens.

The result looks like this.

With this method the builder adjusts when activated so instead of the widgets being underneath the vertical header they are beside it.

In the next post we will go over styling and adding widgets to your vertical header.

You can check it out here.

Hope this was useful 😀.

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.

14 Comments

  • Can you please explain how to make this menu work with mobile settings? When viewing in mobile it covers the entire page and content cannot be seen. Any suggestions would greatly be appreciated.

    Thanks!

    Reply
  • Evening Kat,
    The best way to fix your issue is to make another header just for mobile and apply some additional CSS. Hide the vertical header on mobile devices and you are all set.

    I will post a detailed post later this week.

    Reply
  • Great Tutorial and great question Kat, I am moving a site from another builder to elementor/oceanwp for a client and they have a very similar fixed vertical header that displays the same on all devices.

    It has been a struggle for me to get this to work correctly using ocenwp’s vertical header. It works great on Desktop, but getting it to work correctly on mobile is been a headache.

    I am going to try this tutorial to see if I can get it to work. Aires I will keep an eye out for the mobile post.

    Reply
  • Look great, how can I align it the right and have some margin from the right?

    Reply
  • Hi! Nice work.
    Please tell me where do I place this css?

    .page-content, footer {
    margin-left: 250px;
    }

    Thank you!

    Reply
    • Afternoon Lara,
      You can apply this css in your customizer or inside your stylesheet.

      Reply
  • @Aires DaGraca

    I’ve changed theme from Astra to Hello and works. Must be an error on my installed Astra theme.

    Thank you for your time!
    I’ll follow your work.

    Reply
  • On mobile devices is a problem.
    Even I hide vertical header for tablet and mobile, horizontal margin (margin-left: 250px;) still exist. How to get rid of it on mobile devices?

    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.