Table of Contents
It is not a Rocket Science anymore
It means you can do it too. With little help you can create fixed sidebar header with Elementor with just CSS alone or no need for other 3rd parties plugins.
01
Create Header template
Process To Follow
- Go to Template
- Theme Builder
- Choose Header Template
- Click the Add New Button
- Choose Header as Template Type
- Give Proper Name for future reference
Go to Templates then Theme Builder then Add new – Select the template – Choose to Header and Give proper name for future references.
02
Please Adjust your header column width for Mobile,tablet and Desktop.
- Go to Section
- Advanced Tab ( Cog icon)
- Again Advanced
- Choose CSS ID or Classes
- Give a CSS Class Name, you can use mine or use your own which should be unique. Example - fixed_Header
The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling:
Please simply don’t copy and paste the code,you still need to adjust them properly as per your requirement.( Just for reference) on my testing it works great
.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*/
@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;
}
}The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform.
After you rotate the section. Everything in the section will also rotate to 90deg.
But
If you want to change them to the original state then.
Process To Follow for Logo if you have one
- Click the logo
- Advanced tab
- Advanced - CSS classes
- Give a unique name (logo)
.logo .elementor-image img{
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform:rotate(-90deg);
}Rotate back to original state
- Click the Heading title
- Advanced tab
- Advanced - CSS classes
- Give a unique name (heading)
Heading if you have one Optional
.heading .elementor-heading-title{
-webkit-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transform:rotate(-90deg);
}
you don’t need for icon because there is an option available you can utilize it under icon/style/rotate -90deg
03
Set the display condition
Process
- 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
04
Create a pop up
I don’t need to explain how to create a pop up template because Elementor have already release Tutorials in-depth on how to do it.
What you see on Facebook Group demo is properly adjusting transition effects under Motion effects.
05
Trigger pop up
Process
- Click the icon link / or any widget link
- Click the barell icon or Dynamic tags icon next to link options
- Scroll down and choose Actions
- Then select Pop up
- You will get pop up settings
- From settings then Actions - from 3 option - choose open popup
- Type the pop up name and there you go
Then click the pop up gear icon and you will see pop up setting . Click the Popup then select start typing the pop up you have created and hit update.
And you will see your header in live. If not Clear the cache
Enjoy 🙂 and let me know what do you think on Comment down below or Facebook group. For demo you will find here
