Skip to Main Content

5 Easiest Steps To Create Elementor Fixed Sidebar Header

In this tutorials, I am going to show how to create an Elementor fixed sidebar header with CSS without relying on any 3rd parties plugins

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

  1. You will need an Elementor Pro license if you’re following my tutorial because we will be using the WordPress Menu, Site Logo widget, and button.
  2. 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.

Choose a single flexbox container and create a structure of the template

Pro tips: if you want to reduce DOM size (Amount of DIV Elementor generates). You can watch the Layout Optimization video, enable Optimized DOM Output experiments in Elementor experiments & enable Flexbox Container 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
  1. Site Logo widget
  2. WordPress Menu/ Nav Menu widget
  3. 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.

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

Set the HTML tag to Header

Provide a unique CSS class to the container

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:

  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:
    * 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

  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

Picture of Kishorchand wearing Elementor Blue Shirt that I got it from wining Elementor Header competition

Thangjam Kishorchand Singh

Passionate about web performance, I specialize in assisting individuals and businesses in creating high-speed websites to elevate user experience, improve search rankings, and minimize bounce rates. I continually explore cutting-edge tools and techniques to optimize website performance, sharing insights through informative articles, engaging presentations, and valuable content.

Let's connect on my social media channels to engage in discussions about website speed and transform your site into a lightning-fast online experience.

Follow or chat with me -

Contact Me

4 Responses

    1. I don’t have a site that shows the menu on right but on left you can see my homepage.

      how can I show it on the right? – Simple follow same instruction add the code


      .fixed_Header{
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
      left:100%;
      -webkit-transform-origin:0 0;
      -ms-transform-origin:0 0;
      -moz-transform-origin:0 0;
      -o-transform-origin:0 0;
      transform-origin:0 0;
      width:100vh;
      position: fixed;
      top:0;
      }

      @media(max-width:768px){
      .fixed_Header{
      width:100vw;
      transform: none;
      bottom:0;
      position:relative;
      top:0;
      left:0;
      }
      }

Leave a Reply

Your email address will not be published. Required fields are marked *