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

Creating a fixed sidebar menu is not as Rocket Science as some others might think.

With my little CSS help, you can easily create a sticky sidebar menu or fixed sidebar header with Elementor in no time.

Follow the steps properly and I’m going to show you my process of how I did it in my Singer’s template (Demo) from an Envato Elements plugin.

Results

Elementor Pro (Affiliate link) is used in making this demo. You can achieve the same things with 3rd parties plugin but cumbersome.

Step:1- Create a Header template

  1. Hover your mouse over the templates.
  2. Click the Add New Button
  3. Choose Header from the type of templates
  4. Name your Header template for future reference
  5. Click the Create Template to create a header template.

Add New Template type in Elementor

Elementor's Template On-screen

Step:2- Create a structure

To create the header template, first, we need to select & create a page structure.

In this demo, I will be selecting three structures and adding all the necessary widgets inside the header structure like the site logo widgetnav menu widget & search widgets.

Pro tips: if you want to reduce DOM size (Amount of DIV Elementor generates). You can follow best practices on how to optimize layout or enabled Optimized DOM Output experiments in Elementor experiments.

Elementor structure

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

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

Step:3- Choose the HTML tag & provide a CSS class

Now to properly use the HTML5 semantic, we have to choose the header tag from the HTML tag Dropdown menu and add a CSS class to the section – advanced tab to modify the behavior with Custom CSS.

  1. Click the header/section handle & set the HTML tag as header.
  2. Click the Advanced tab (Cog icon)
  3. Under the advanced setting – give a CSS class in the 2nd screenshot below.

Set the HTML tag to Header

Define fixed_header as CSS class in Section Advanced settings

Step:4- Create a fixed sidebar header with Elementor

From the previous step, we have added a CSS class of “fixed_header” to the header advanced settings.

To fix & rotate the header vertically, we have to utilize

  1. CSS transform property
  2. CSS transform Origin &
  3. Position fixed CSS Property

The transform-origin CSS property sets the origin for an element’s transformations. – MDN

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model -MDN.

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.
				
					/*
 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{
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-transform-origin:top left;
        -ms-transform-origin:top left;
            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;
}
}
				
			

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 doesn’t want to appear
  4. Save and Close

After you have adjusted everything.

Your next step is to set up the 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 showcase 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 like

  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.