Key Elements

Key Elements

Vertical Header

How To Make A Fixed Vertical Header

  • Last Updated: August 2, 2020
  • 80 Comments

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

#go_vertical{
	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;
}
}


@media (min-width: 800px){
main.site-main,
.elementor-location-single,
.elementor-location-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 😀.

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

    Thanks!

  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.

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

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

  9. @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?

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

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

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

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

      Thanks.

    3. /* 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;
      }
      }

    4. im having a problem.. only the footer is being pushed 250px and not the mainsite body

      what seems to be the problem please reply

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

    9. Give me some time to look at the theme this tutorial was specifically done for Hello Theme.

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

  17. Hi, I have followed your valuable instructions in the page and was able to create a vertical header of 300 px width. I added Logo, Nav Menu at top and Social icons, Instagram feed at bottom of the menu. Everything is fine in my 2560 x 1440 monitor screen. But when i see my website at lower size screen say 1366 x 768 scree, the bottom elements (like Social icons and copyright texts ) can not be seen.

    So, in the above context can you please help me to make the vertical header scroll-able for the smaller screens.

    N.B- I use Astra pro theme and Elementor pro.
    Also media width as follows-
    @media (max-width: 1050px){
    #go_vertical {
    display: none;
    }
    }

    site- sahamanojphotography.com/blacksilver

    2. Add this to your #go_vertical CSS

      overflow-y: scroll!important;
      max-height: 100%;

    4. Thank You So much Aires. I repeatedly checked this page for an update from you after my comment. I truly become your fan. Thank You so very Much. Let me check myself and i will update. (Manoj)

    5. Hi Aires. I have updated the css. The vertical header is now become scroll-able. But the scroll bar is always being appear on the screen.
      It looks odd to me, having a visible scroll bar just beside the vertical header all the time. Is there any way to make the header scroll-able without having the visible scroll bar WHEN REQUIRED, according to screen size the viewer watching on.

      Thank you in advance.

    6. You can do this with a media query

      @media (max-width:1024px){
      /*your css here*/
      }

      This query would not apply the css until your screen reaches 1024px.

  18. Hi Aires,

    I’m currently building a website with elementor pro (helo theme). I have a horizontal header which contains a login and registration link (it will get other features like choice of language in the future). In addition I want to have vertical header with the menu. Using your tutorial, it didn’t work, I guess because I already have a (small) header in place. How should I adjust the CSS code in order to make it work please?

    1. Hi Philip, if you followed the tutorial correctly it should have work just be sure to make the vertical header in the same template as the horizontal out side that you might have to use some of the conditional options if you plan to have multiple headers.

  19. Hi Aires,

    I noticed I made a mistake twice before making my post, my bad, the vertical header is working! Thank you so much!!

    Weird that we can’t get this result within Elementor Pro without CSS…

  20. Hi Aires,

    After adding these lines in additional CSS are not changing anything. The content is still behind the vertical header.
    Maybe there was updates or something.

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

    Everything else is working.
    WordPress 5.4.1 \ Elementor Pro 2.9.4 \ Theme – Hello 2.3.0

    Btw, found these lines in the comments that works except for the posts (Side menu is still above them)

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

    Thank you in advance.

  21. Hi there,

    Dropping you a link: http://www.reversus.lt
    Actually I have deleted all the content to edit from a scratch, but it dropped some posts by it self, so you can see. Also there is one single page template with photos created, when you click on post.

    All code lines are currently added.

    Thanks!

    1. Morning Vic,
      There are some changes to the markup in the theme will update the post shortly.
      Thanks.

  22. Hi Aires, I have one more question if you don’t mind…it’s regarding the submenu of the vertical menu 🙂

    I made the submenu wider using:

    @media (min-width: 1025px) {
    .sub-menu li a {
    width: 200px;
    }
    }

    Then I got the hight from the top (minus 30px because of a horizontal header) to the bottom using:

    @media (min-width: 1025px) {
    ul.sub-menu {
    height: calc(100vh – 30px);
    }
    }

    But doings so the buttons of the submenu are at the top of the submenu. If I want them lower using “top: 75px;” in the first snippet of code, not all submenu buttons are clickable. Would you have a solution for this? I’m a total noob regarding elementor and CSS….

    Thank you in advance

    1. Hi Philip, can you provide a link to the site and a sketch of what you are trying to achieve.

  23. Hello,

    selectors have changed. So put .type-page i/o main and .content-area for WooCommerce pages 😉

    Working CSS:
    .content-area, footer, .type-page {
    margin-left: 250px;
    }

    1. Hi, thank you so much for this guide. I built the vertical menu. But can’t for the life of me get the body margin-left to apply universally without it taking the menu with it.

  25. Hi, I created the vertical menu, but my content on the other size of the page, if I scroll right it goes behind my vertical menu. Is there a way to make the menu and page static?

    1. Hi Adriana,
      The menu should be fixed to the left side and on top of content there should be no movement left or right please double check your work and post back if I can assist you further.
      Feel free to post a link also it helps diagnose the issues

  26. Hi Aires,

    the left main margin to 250px, not working
    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 Storefront 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;
    }
    }

    Please help
    site: registrokadampamexico.org
    Thank you

  31. This is a great tutorial. I have been trying to achieve this for days and all the other guides were a mix of adding templates into single page or post sections which worked to some degree but all of them had issues around spacing and different widgets sitting properly in the right column.

    The difference with this tutorial is the advice to use the vertical area as a header rather than a sidebar or a single page template. It solves all the spacing and padding issues for me.

  32. Hi, Thank you for the tutorial. It worked great! I have a question about submenu, I want them to display right under the parent and always showing rather than as dropdown. Is there a way to achieve that? Thanks in advance

Leave a Reply

Join Our Newsletter

Over 2000 Elementor Lovers.

Subscribe
Recent Posts
Recent Comments
  • Home
  • Articles
  • Resources
  • Contact
  • Terms & Conditions
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

© 2019 Key Elements, All Rights Reserved