Last Updated – 8/26/2019
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.
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.