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