Table of Contents
It is not Rocket Science to create a fixed sidebar header with Elementor.
I mean you can easily do it without the need for 3rd parties addons. With this little help, you can easily create a sticky or fixed sidebar header with Elementor with just CSS.
Follow the steps properly and I’m going to show my process of how I did it in my singer template.
Here the results
Step#1. Create Header template
- Hover over the templates.
- Click the Add New Button
- Select Header from the list of templates.
- Give a Proper Name for future reference
- Click the Create Template to create a template.
Step#2. Create a structure and add your widgets
To create a header template, first, we need to select a page structure first. In this demo, I will select three structure and add all the necessary widgets for header.
Pro tips: if you want to reduce DOM size (Amount of DIV Elementor’s generates), you can also do with one structure.
Follow best practices on how to optimize layout from Official’s Elementor Channel.
After you create your page structure, now, drag and drop the site logo widget, Nav Menu widget, or any Elementor widgets.
Step#3. Give a CSS class or ID
- Click the header/section handle & set the HTML tag as header.
- Click the Advanced tab (Cog icon)
- Under advaned setting, give a class class or an id shown in screenshot below.
Keep this mind that when we rotate the site header with the CSS transform property everything will be upside down. So you have reverted it back to its original state.
To rotate the section (header) vertically, we have to utilize the CSS transform property (rotate) and to change the origin of the transform we have to use the CSS transform Origin.
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.
The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform.
The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling:
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 5 version
Reminder:
* fixed_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 Background position to center center, top center etc
*/
.fixed_header{
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform: rotate(90deg);
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){
.fixed_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 section 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 don't want to appear
- Save and Close
After you have adjust everything .
Your next step is to set up display condition and click the save & close button to publish the template.
You can see the live version. The singer template you’ve experienced is the template I modified from Envato Elements for the Elementor WordPress plugin.
If you have different project related to header other than this, you can follow my tutorials and implement on yours’s client project.
- How to create sticky header with Elementor pro.
- Don’t have Pro version of Elementor, you can choose one of the 5 plugins to create sticky header with free plugin.
