How to Create a Vertical Header [Advanced]

***2023 Update: Position (previously named Custom Positioning) can now be found under the Advanced → Layout tab.

In this tutorial we learn how to create a vertical header in Elementor. We’ll also explore how to show the default horizontal header on mobile devices only, to ensure a smooth user experience.

The tutorial will cover:
✔︎ Creating a header template
✔︎ Repositioning a header to display vertically
✔︎ Adding custom CSS including media queries
✔︎ And much more!

Custom CSS:

selector{
width: 100px;
position:fixed;
}

@media all and (max-width: 767px){
selector{
width:100%;
height:100px;
}
}

@media all and (min-width:767px){
selector{
writing-mode: vertical-rl;
transform: scale(-1);
}
}

Timestamps:
00:00 Introduction
00:50 Create a New Header
02:00 Fix Header & Amend Width
02:30 Add Media Query for Mobile View
03:30 Populate Header
04:00 Rotate Navigation
04:30 Space Out Elements
04:50 Check Responsive Views
05:20 Amend Mobile View
05:50 Style Mobile Menu
06:45 Save & Assign Header Template
06:50 See Finished Header
07:00 Recap

[Elementor]

***2023 Update: Position (previously named Custom Positioning) can now be found under the Advanced > Layout tab.

[sharonreaves]

For those of you looking for a right sided header someone from Elementor helped me with a solution: To make the header move to right side, you simply need to add right:0; after position:fixed. It worked for me. Hopefully it will help others as well.

[iLikeMyOwnPosts]

...I just had to figure out how to do this all on my own. It works... it looks great. It was challengine and can be confusing to edit... so I'm eager to see how you guys did it and how it differs!

[albacastro]

Works great! Although I am trying to add a link anchor to section but seems that it only works with vertical scrolling webs. Could anybody explain what to do in these cases? Thanks!

[firozfaizan]

Thanks for your informational video. Want to know if it works if navigation has 2 level deep.

[eric-rounds]

This was really great and broken down into all the steps needed. But I’m curious why you’re using custom CSS and not the transform capabilities now part of Elementor?

[TheOne-rcyv]

great tutorial, quick question...how to i make it to the right side instead of the left? :)

[AnnitaCaniglia]

Hey there, I'm having an issue where the header adds unwanted padding to the top of my page. How can I get rid of that? Thanks for the tutorial!

[mafusail]

Hello, perfect tutorial, but how to transfer menu to the right? ))
I would be grateful if someone could tell me and others this

[dougcapron]

Great tutorial, thanks! I would like to have a hamburger menu within the vertical menu for desktop as well, is this possible? From there I would like to have a fly out full screen menu, but I don't want to use Popups. Any suggestion would be appreciated. + secondly, how do you modify the position of the menu from the lower bottom to the middle of the header, again for desktop. Cheers

[kevintunis]

What template are you using in the tutorial? Is there a tutorial on the horizontal scrolling used in this tutorial?

[storytelller]

Hey! Thanks for the great tutorial! Could someone advise me how to make the menu to be with hamburger in the header (this is clear...) and to expand on full screen. How to change the CSS? Your help will be appreciated! Tsvetty

[rehansanadi]

Hey elementor it is a great tutorial I was wondering If I want to position the vertical header on the right hand side of the website how can I achieve that Right now the header is on the left hand side of the website please let me know thanks in advance

[idanratinsky]

at 5:14 - there is no "positioning" tab, what to do instead? I'm using the latest elementor pro version... why don't you update your videos according to changes...

[mmb]

So it's not available via Elementor, it's just some added CSS

[mohammadalifdewan]

I face some problem with custom css. I do css in elementor, it works. Then, when I delete the css, the css doesn’t disappear. It still working. Why? What's the solution?