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