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 addons. With this 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

Elementor Affiliate links

Make Your Design Stand out With Elementor pro

You need Elementor Pro, if you haven't upgraded it yet use my Affiliate link, this commission comes at no additional cost to you but it will keep the website a little help and write more compressive tutorials for you.

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 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 structure and add all the necessary widgets for header.

Pro tips: if you want to reduce DOM size (Amount of DIV Elementor’s generates), you can also do with one structure.

Follow best practices on how to optimize layout from 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 ID

  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. Fixed sidebar header and flip the header vertically with CSS

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. 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.

Display Condition

You can see the live version. The singer template you’ve experienced is the template I modified from Envato Elements for the Elementor WordPress plugin.

If you have different project related to header other than this, you can follow my tutorials  and implement on yours’s client project.

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

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.