5 Easiest Steps To Create Fixed Sidebar Header With Elementor

In this tutorials i am going to show how to create fixed sidebar header with Elementor with CSS

Fixed Sidebar header with Elementor

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

  1. Go to Template
  2. Theme Builder
  3. Choose Header Template
  4. Click the Add New Button
  5. Choose Header as Template Type
  6. Give Proper Name for future reference
Go to Dashboard - Template - Theme builder

Go to Templates then Theme Builder then  Add new  – Select the template – Choose to Header and Give proper name for future references.

Elementor's Template On-screen
Select structure as per your requirement. In this demo i will go with three structure. and add all your necessary widget .
Elementor structure

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.

Drag & Drops Site Logo and Nav Menu widget from Elementor Editor

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:

To rotate the section (header) vertically, we have to utilize CSS transform property.

Adjust your header column width for Mobile, tablet and Desktop respectively.

Follow the steps Properly:
  1. Go to respective Section (header)
  2. Go to Advanced Tab ( click the Cog icon)
  3. Below that you will find Advanced settings and then find CSS classes or ID.
  4. Choose CSS ID or Classes whichever you prefer, both will works fine.
  5. Give a unique name for your preference for me I choose 'fixed_header' (without parenthesis).
Simply don’t copy and paste the code below, you still need to adjust them properly as per your requirement. ( Just for reference) on my testing, it works great
Define fixed_header as CSS class in Section Advanced settings

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;
}
}
				
			
Rotate the header vertically

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

  1. Hit Publish
  2. Pop up window will appear
  3. Include : Set the display condition to all site wide or Exclude : Set the display condition where your fixed header don't want to appear
  4. Save and Close
After you have adjust everything . Your next step is to set up display condition. If your fixed sidebar header don’t have pop up you can ignore rest of the process.
Display Condition

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

  1. Click the icon link / or any widget link
  2. Click the barel icon or Dynamic tags icon next to link options
  3. Scroll down and choose Actions
  4. Then select Pop up
  5. You will get pop up settings
  6. From settings then Actions - from 3 option - choose open popup
  7. Type the pop up name and there you go
Dynamic tags

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 

pop up settings

Enjoy 🙂 and let me know what do you think on Comment down below or Facebook group. For demo you will find here