5 Easiest Steps To Create Fixed Sidebar Header With Elementor

  • kishorchand
  • Elementor Page Builder
  • June 7, 2019
  • 2 Responses
  • Modified 9:33 pm

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.

01

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 Template
Select your template
Select structure as per your requirement. In this demo i will go with three structure. and add all your necessary widget .
5 Easiest Steps To Create Fixed Sidebar Header With Elementor 1

02

Fixed sidebar Header with Elementor

in order to rotate the section we have to utilize CSS transform property to flip vertically to 90deg.

Please Adjust your header column width for Mobile,tablet and Desktop.
  1. Go to Section
  2. Advanced Tab ( Cog icon)
  3. Again Advanced
  4. Choose CSS ID or Classes
  5. 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

  1. Click the logo
  2. Advanced tab
  3. Advanced - CSS classes
  4. Give a unique name (logo)
For Logo Optional

.logo  .elementor-image img{
   -ms-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   transform:rotate(-90deg);
}

Rotate back to original state

  1. Click the Heading title
  2. Advanced tab
  3. Advanced - CSS classes
  4. 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

  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.
5 Easiest Steps To Create Fixed Sidebar Header With Elementor 2
For me i have pop up  , if you want to see live version here the demo page i modified from Envato Elements for Elementor WordPress plugin What we have left to do is to create pop up so when user click the hamburger icon pop up will trigger.

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.

5 Easiest Steps To Create Fixed Sidebar Header With Elementor 3
Play Video

05

Trigger pop up

Process

  1. Click the icon link / or any widget link
  2. Click the barell 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
5 Easiest Steps To Create Fixed Sidebar Header With Elementor 4

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 

5 Easiest Steps To Create Fixed Sidebar Header With Elementor 5

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