Table of Contents
- 1 Here the results and demo for fixed sidebar header with Elementor
- 2 Step#1. Create Header template
- 3 Step#2. Create a page structure and add your widgets
- 4 Step#3. Give a CSS class or an ID to the header tag
- 5 Step#4. Flip the header vertically with CSS Transform Property
- 6 Step#5. Watch the video for the fixed sidebar header with Elementor pro
- 7 Step#6. Set the display condition
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 add-ons like I did with the sticky header with Elementor.
With 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.
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 page 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 structures and add all the necessary widgets for the header.
Pro tips: if you want to reduce DOM size (Amount of DIV Elementor generates). You can follow best practices on how to optimize layout from the 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 an ID to the header tag
- 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.
Step#4. Flip the header vertically with CSS Transform Property
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#6. 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.
The singer template I recommend above is the template I modified from Envato Elements for the Elementor WordPress plugin.
If you have a different project related to the header other than this, you can follow my tutorials and implement them on yours’s client project.
- How to create a sticky header with Elementor pro.
- Don’t have the Pro version of Elementor, you can choose one of the 5 plugins to create a sticky header with free Plugins.
