5 Easiest Steps To Create Elementor Fixed Sidebar Header

On this Page:

1) Results
2) Requirement
3) Create Elementor fixed Sidebar Header

Creating an Elementor fixed sidebar header is not as Rocket Science as some others might think. With my little CSS help, you can easily create the header with Elementor Pro in no time without relying on any 3rd parties plugins.

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

Requirement

You will need an Elementor Pro license if you’re following my tutorial because we will be using the WordPress Menu, Site Logo widget & Button.
Enabled the Flexbox container experiments in Elementor (Backend) > Settings > Features and activate the features

Create Elementor fixed Sidebar Header

Step#1- Create a Header template

A more in-depth tutorial on my How to create a sticky header with Elementor article.

Step#2- Create a structure

To create the header’s template, first, we need to create a page structure that will hold all our necessary widgets and later we can style it with the help of custom CSS.

Pro tips: if you want to reduce DOM size (Amount of DIV Elementor generates). You can watch the Layout Optimization video & enabled Optimized DOM Output experiments in Elementor experiments.

Select only one column structure and drag and drop & stack all the widgets shown in sticky header tutorials. It will look something like this.

Drag and drop all the widgets and stack them together

Stack view when you drag and drop all the widgets inside the container

Site Logo widget
WordPress Menu/ Nav Menu widget
Button or any widget

Place all the items horizontally and align the items in the center

Step#3- Change the HTML tag & provide a CSS class

To properly use the HTML5 semantic, we have to change the header tag from default to the header and provide a CSS class to the Container > advanced tab to modify the behavior with Custom CSS.

Click the Container’s handle
Under Additional Options change the HTML tag from default to the header tag. (first attachment)
Click the advanced tab under the layout and scroll down – give a CSS class in the (Second attachment)

Step:4- CSS properties and Custom CSS

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

Keep this in mind that you can utilize the Built-in Elementor features for positioning and transforming the widget but it requires a lot of tweaking.

To fixed the header & rotate the header vertically, we have to utilize.

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

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.

Position: fixed CSS property the element is removed from the flow of the document like absolutely positioned elements. In fact, they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling. – CSS tricks

Reminder:

Adjust your header’s column width for Mobile, Tablet, and Desktop respectively.
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:
    * 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 a Background position to center center, top center, etc
*/

.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){
.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 container will also rotate to 90deg, adjust properly and Save your header.

Step#5- Set the display condition

Hit Publish
Pop up window will appear
Include: Set the display condition to all site-wide or Exclude: Set the display condition where your fixed header doesn’t want to appear
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.