Creating an Elementor fixed sidebar header is not as Rocket Science as some others might think. With my little CSS help, you can easily create the header with Elementor Pro in no time without relying on any 3rd parties plugins.
Follow the steps properly and I’m going to show you my process of how I did it in my Singer’s template (Demo) from an Envato Elements plugin.
Results
Requirement
- You will need an Elementor Pro license if you’re following my tutorial because we will be using the WordPress Menu, Site Logo widget & Button.
- Enabled the Flexbox container experiments in Elementor (Backend) > Settings > Features and activate the features
Create Elementor fixed Sidebar Header
Step#1- Create a Header template
A more in-depth tutorial on my How to create a sticky header with Elementor article.
Step#2- Create a structure
To create the header’s template, first, we need to create a page structure that will hold all our necessary widgets and later we can style it with the help of custom CSS.
Drag and drop all the widgets and stack them together

- Site Logo widget
- WordPress Menu/ Nav Menu widget
- Button or any widget
Place all the items horizontally and align the items in the center
Step#3- Change the HTML tag & provide a CSS class
To properly use the HTML5 semantic, we have to change the header tag from default to the header and provide a CSS class to the Container > advanced tab to modify the behavior with Custom CSS.
- Click the Container’s handle
- Under Additional Options change the HTML tag from default to the header tag. (first attachment)
- Click the advanced tab under the layout and scroll down – give a CSS class in the (Second attachment)
Step:4- CSS properties and Custom CSS
From the previous step, we have added a CSS class of “header” to the header advanced settings.
The transform-origin CSS property sets the origin for an element’s transformations. – CSS tricks
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model -MDN.
Position: fixed CSS property the element is removed from the flow of the document like absolutely positioned elements. In fact, they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling. – CSS tricks
Reminder:
- Adjust your header’s column width for Mobile, Tablet, and Desktop respectively.
- Simply don’t copy and paste the code below, you still need to adjust them properly as per your requirement. For my demonstration purpose, the code works just fine.
/*
Reminder:
* header is the CSS class in step#3 we defined.
* Width to 100vh to stretch the section vertically
* When using position: fixed and absolute CSS property, we have to define left, top, right, and bottom.
* We define transform-origin to change the position of the origin of a transform like a Background position to center center, top center, etc
*/
.header{
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin:top left;
-ms-transform-origin:top left;
transform-origin:top left;
width:100vh;
position: fixed;
left:80px;
top:0;
}
/*
* For mobile devices.
* On Mobile devices, the vertical header design looks unprofessional that is why I set the transform to none so it will not rotate to 90deg.
*/
@media(max-width:768px){
.header{
left:0;
position:relative;
width:100%;
-webkit-transform:none;
-ms-transform:none;
transform:none;
-webkit-transform-origin:none;
-ms-transform-origin:none;
transform-origin:none;
}
}
After you apply the CSS. Everything inside the container will also rotate to 90deg, adjust properly and Save your header.
Step#5- Set the display condition
- Hit Publish
- Pop up window will appear
- Include: Set the display condition to all site-wide or Exclude: Set the display condition where your fixed header doesn’t want to appear
- Save and Close
After you have adjusted everything.
Your next step is to set up the display condition and click the save & close button to publish the template.