Skip to Main Content

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 with Elementor pro

It is not Rocket Science to create a fixed sidebar header with Elementor.

I mean you can easily do it without the need for 3rd parties add-ons like I did with the sticky header with Elementor.

With little help, you can easily create a sticky or fixed sidebar header with Elementor with just CSS.

Follow the steps properly and I’m going to show my process of how I did it in my singer template.

Here the results and demo for fixed sidebar header with Elementor

Step#1. Create Header template

  1. Hover over the templates.
  2. Click the Add New Button
  3. Select Header from the list of templates.
  4. Give a Proper Name for future reference
  5. Click the Create Template to create a template.
Add New Template type in Elementor
Elementor's Template On-screen

Step#2. Create a page structure and add your widgets

To create a header template, first, we need to select a page structure first. In this demo, I will select three structures and add all the necessary widgets for the header.

Pro tips: if you want to reduce DOM size (Amount of DIV Elementor generates). You can follow best practices on how to optimize layout from the Official’s Elementor Channel.

Elementor structure

After you create your page structure, now, drag and drop the site logo widget, Nav Menu widget, or any Elementor widgets.

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

Step#3. Give a CSS class or an ID to the header tag

  1. Click the header/section handle & set the HTML tag as header.
  2. Click the Advanced tab (Cog icon)
  3. Under advaned setting, give a class class or an id shown in screenshot below.
Set the HTML tag to Header
Define fixed_header as CSS class in Section Advanced settings

Step#4. Flip the header vertically with CSS Transform Property

Keep this mind that when we rotate the site header with the CSS transform property everything will be upside down. So you have reverted it back to its original state.

To rotate the section (header) vertically, we have to utilize the CSS transform property (rotate) and to change the origin of the transform we have to use the CSS transform Origin.

Reminder:

  1. Adjust your header’s column width for Mobile, Tablet, and Desktop respectively.
  2. 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.

The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform.

The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling:

				
					/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 5 version

 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{
        -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 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;
}
}
				
			
Adding CSS transform property to rotate the section vertically

After you apply the CSS. Everything inside the section will also rotate to 90deg, adjust properly and Save your header.

Step#5. Watch the video for the fixed sidebar header with Elementor pro

Step#6. Set the display condition

  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 and click the save & close button to publish the template.

Picture showing how to set up display condition in Elementor pro

The singer template I recommend 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.

  1. How to create a sticky header with Elementor pro.
  2. Don’t have the Pro version of Elementor, you can choose one of the 5 plugins to create a sticky header with free Plugins.
Thangjam Kishorchand

Thangjam Kishorchand

Hi there, this is my place where I write about my Elementor tips and tricks that I learned for the last 2 years. I am mostly active on Quora and Facebook. I love messing around with design trends like Variable Fonts, Dark Mode

Powered by Elementor pro

This site is powered by Elementor pro : Theme builder and it contains Affiliate links,which means that if you buy from my links, Foxscribbler will earn a small commission.This commission comes at no additional cost to you.