5/5

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

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

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…

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

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

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

  • @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
  • @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?

    Reply
    • The CSS can be applied in the customizer or child theme style sheet.

  • 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

    Reply
    • Awesome job Calvin,
      Thanks for sharing it is greatly appreciated.

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

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

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

      Thanks.

    • Looks like there are some changes in the markup I will publish an update shortly.

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

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

      what seems to be the problem please reply

    • Please provide a link so that I can help you further.

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

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

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

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

  • Hi Aires.

    Again – so easy. Really have to learn more CSS. 🙂

    Thank You / Sascha

    Reply
  • 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?

    Reply
    • Hi Ashley, can you paste what you have so I can compare it.

  • 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

    Reply
    • Hi, Manoj I will have a look and post back with an update.

    • Add this to your #go_vertical CSS

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

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

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

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

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

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

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

    Reply
    • Hi Philip, Thanks for letting me know.

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

    Reply
    • Hi Vic, Can you provide a link so that I can view your site.

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

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

    • It seems everything works fine!

      Thank you!

  • 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

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

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

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

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

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

    • I can’t see the issue you are describing from my end things look fine in Safari & chrome.

  • 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

    Reply

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?