Elementor, Tips & Tricks, Vertical Header

How To Make A Fixed Vertical Header

Last Updated – 1/19/2020 **updated the CSS for the main and footer margins

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 be sure 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.

	position: fixed;
	width: 250px;
	top: 0;
.go_full_height {
	height: 100vh;

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.

@media (min-width: 800px){
main.site-main ,footer#site-footer {
    margin-left: 250px;

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.

Learn how to swap your logo after your header becomes sticky here.

Hope this was useful 😀.

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.

Related Posts

41 Responses

  1. 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.


  2. 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.

    1. Thank you! I am like … in dare straights with this. So I will try the alternative you mentioned. I can’t wait for your new tutorial on steps to do this.

  3. 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.

  4. @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.

    1. The tutorial was done with Hello Theme as the foundation.
      Astra probably uses a different css selector which is why things didn’t work as they should. To the css to work you would have to look at the code and find the selectors used by the theme.

      sorry for your troubles.

  5. 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?

  6. @Aires DaGraca
    I’m sorry to insist on a question that has already been asked. But I still haven’t figured out where to insert the CSS code. Could you try to explain otherwise?

  7. Thanks for the article, it absolutly did the job.
    and at the end i simply use some mobile menu plugin as the mobile menu and it add some seperation to the menus which is also easier to maintain.

    simply set the css to not display on certain screen size or just hide the display on mobile size in elementor can do the job

  8. Thanks for your tutorial! I did everything as described, using Hello theme. But I don’t get the left margin to work, so the menu keeps overlaping the content! What is wrong? And what do I have to set to apply the margin only for desktop?

      1. I will have a look today and post a solution. Maybe the markup for hello has changed since they added to wordpress.

  9. Hi Aires,

    thank you – exactly what I was looking for!
    Although I am having trouble making the margin of 250px work – I tried adding the CSS in the customizer as well as the stylesheet. Maybe there’s been an update to Elementor in the meantime?

    I’m using Hello Theme 2.2.2 and Elementor Pro 2.8.3

    1. I will review the current Hello Theme and post my findings. If something has change I will update this post.


    2. /* Any thing above 800px this will add 250px margin to the main and footer areas*/

      @media (min-width: 800px){
      main.site-main ,footer#site-footer {
      margin-left: 250px;

      1. Hello Aires,
        not work the left main margin to 250px.
        I posted the css in the header parameters where I had posted go_vertical and go_full_heigth, but it doesn’t work. I use HOTELLER ThemeGoods Theme

        #go_vertical {
        position: fixed;
        width: 250px;
        top: 0;
        .go_full_height {
        height: 100vh;

        @media (min-width: 800px) {
        main.site-main, footer # site-footer {
        margin-left: 250px;

        ERROR elementor say:
        Element (main.site-main) is overqualified just use .site-main without element name

        I change it but not work:

        @media (min-width: 800px) {
        .site-main, # site-footer {
        margin-left: 250px;

  10. Hi Aires.
    Thanks for sharing Your knowlegde with us – this is so easy and work´s perfect!
    Is there an easy way You would prefer to get the navi on the right side of the page?

    1. Hi Sascha,
      You would need to add some additional css to the #go_vertical id:

      right: 0px;

      Keep in mind that you also need to remove the margin-left and go with margin-right in the media query.

  11. When I paste the CSS code, I’m getting a couple errors on line 21. It says “Expected IDENT at line 21, col 2. ” What does that mean?

Leave a Reply

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.
Request A Tutorial

Have a request I would love to hear about.