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.
Step#1. 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.
Step#2. Add widget inside the structure
After you create your page structure, now you need to drag and drops the Elementor pro widgets i.e the site logo widget and the Nav Menu widget.
Step#3. Flip header vertically with CSS 'transform property'
The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling:
Adjust your header column width for Mobile, tablet and Desktop respectively.
Follow the steps Properly:
- Go to respective Section (header)
- Go to Advanced Tab ( click the Cog icon)
- Below that you will find Advanced settings and then find CSS classes or ID.
- Choose CSS ID or Classes whichever you prefer, both will works fine.
- Give a unique name for your preference for me I choose 'fixed_header' (without parenthesis).
Using CSS transform-Property and transform-origin to 'rotate' and 'point of origin' of transform respectively:
The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform.
/* Reminder:
* fixed_header is the CSS class in step#3
* 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
* Define Left property
*/
.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 look unprofessional that 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 and Save your header.
Step#3. 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
For me, I have a pop-up created with the help of Elementor pro, if you want to see the live version (Click the hamburger menu). The singer template you’ve experienced is the template I modified from Envato Elements for the Elementor WordPress plugin.
Step#4. Create a pop up
I don’t have to explain how to create a pop-up template with Elementor pro because Elementor has already release Tutorials in-depth on how to use it.
What you see on the Facebook Group demo is properly adjusting transition effects under Motion effects.
Step#5. Trigger pop up
Process
- Click the icon link / or any widget link
- Click the barel 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 popup gear icon and you will see a 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 the live version. 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
