On this Page
Results
Step:1- Create a Header template
- Hover your mouse over the templates.
- Click the Add New Button
- Choose Header from the type of templates
- Name your Header template for future reference
- Click the Create Template to create a header template.
Step:2- Create a structure
To create the header template, first, we need to select & create a page structure.
In this demo, I will be selecting three structures and adding all the necessary widgets inside the header structure like the site logo widget, nav menu widget & search widgets.
After you create your page structure, now, drag and drop necessary widgets such as the site logo widget, Nav Menu widget, or any Elementor widgets.
Step:3- Choose the HTML tag & provide a CSS class
Now to properly use the HTML5 semantic, we have to choose the header tag from the HTML tag Dropdown menu and add a CSS class to the section – advanced tab to modify the behavior with Custom CSS.
- Click the header/section handle & set the HTML tag as header.
- Click the Advanced tab (Cog icon)
- Under the advanced setting – give a CSS class in the 2nd screenshot below.
Step:4- Create a fixed sidebar header with Elementor
From the previous step, we have added a CSS class of “fixed_header” to the header advanced settings.
To fix & rotate the header vertically, we have to utilize
The transform-origin CSS property sets the origin for an element’s transformations. – MDN
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.
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:
* 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{
-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){
.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 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.
The singer template I showcase 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 like
- 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.
