Sticky Transparent Header Elementor + Scroll Changes

How to Create Sticky transparent Header + Shrink logo and menu items with Elementor pro without the need of 3rd party Elementor addons or plugins..

Select structure by clicking “+” icon (Here 2) /Adjust the column width as necessary /Edit Section/ Style /Background/ Background Type/ Set it none or Clear and Then add Z-index to 100 or more.

This is one of the most common question,i have found on Elementor Official Groups on the topic of Transparent Sticky Header with Elementor Page Builder by taking question as an example,i was on a journey to learn and give you what i learned so far and shared it to you for free. All the code are credited to their respected page 

 

It can done if you prefer to use 3rd party addons or Plugin like
 Sticky Header Effects for Elementor (Work only if you have Elementor Pro installed) .

 

But this blog post is all about custom CSS without the need of 3rd party plugins or addons. You can use the plugin if you prefer or if you don’t want mess about with settings and CSS.

 

If you are like me and doesn’t want to rely too much on Additional plugins.This blog post is for you and i will show you how it is done step-by-step.

 

NOTE : All the symbol “/” are path. and “-” is the sub-path

01

Create Header Template

Elementor/ My Templates /Header / Add New /Give a name for future reference (Main Header) /Create Template

Elementor templateType

02

Create Sticky Section with Transparent Background

In order to enable Sticky Header we need to go to Section/Motion Effects/Sticky.

Section/Motion Effects/ sticky/Enable Sticky -Top – Select the devices – desktop or mobile or tablet to enable sticky or Disable- Offset to “0” – Effect offset : 20px or more and 

Section with Tranparent background

Don’t forget to add Section classes

 data-srcset

03

Drag and Drop Site Logo & Nav Menu widget

Next step is to drag and drop Site logo widget and Don’t add any style to your logo because we will manually add CSS for the logo . You can style Menu item but not the FONT SIZE (because we will add  CSS). You can adjust Column width.

Sticky Transparent Header Elementor + Scroll Changes 1

04

Create Sticky header with Background color change when user scroll down & reduce min-height.

In this step,we need to create Transparent+ sticky + background color header when user scroll down.

 

To be consider:

  • You need to add min-height that will be under Section then height min-height set it to :90px (your header requirement)
  • Adjust your structure properly for better visual but DON’T STYLE IT yet we will do it with CSS.

 

when Sticky effect occur background color  will change to Black.  

 

 

selector.elementor-sticky--effects{
background-color:#000000;}

 

 

/*—– Shrink the container,if the min-height is larger 40px——*/

selector.elementor-sticky--effects >.elementor-container{
min-height: 40px;
}


selector > .elementor-container{
transition: min-height 2s ease !important;

}

Simply Follow Elementor Videos for better understanding

Play Video

05

Shrink logo and Nav menu item with CSS

  • For Site logo Widget
  • To shrink logo we need to add some CSS ,let add CSS classes as “logo” to the Site logo widget then advanced setting then CSS classes .

     data-srcset

    Site logo/Section/Advanced/Custom CSS 

    Tweak for performance 

    /*Logo before sticky enable & .logo is our CSS Classes*/

     

    .logo .elementor-image img{
    width:60%;
    transition:width .3s ease-in;
    }

    Now we have to add Custom CSS for the Site logo widget to shrink the logo when “Elementor Sticky Effect”  is applied.

    /*Logo when Elementor Sticky Effect Applied & .logo is our CSS Classes*/

    .elementor-sticky--effects .logo   .elementor-image img {
    width: 55%;/* adjust your width*/
    }

     data-srcset

  • For Nav Menu Widget
  • Have you ever thought of enable the same effect as logo to menu when user scroll down.

    Don’t worry i got it done for you and it is really simple too. It is the same process of adding CSS classes to Logo now add CSS classes to nav widget  as “menu”,so we can add CSS and control. You don’t need JavaScript to handle it.

    NOTE: Do not style anything(typography)  if you do so you have to add !important  on every css and that is not good at all.

    .sec  .elementor-nav-menu--main .elementor-item{
    color:green;
    font-size: 16px;
    }
    .elementor-sticky--effects  
    .sec  .elementor-nav-menu--main .elementor-item{

    color:red;
    font-size: 14px;
    transition:color .3s font-size .3s ease-in;
    }

     data-srcset
    Sticky Transparent Header Elementor + Scroll Changes 2

    06

    How to Switch/Change "Logo" when user scroll down ? (Compatible with Firefox)

    Curious right !

    Don’t worry the same thing happened to us when someone’s showcase their website and saw the effect.Our reaction was like how can we achieve the same effect like other did . Sometime it came to our mind on how to do  it but never pull it off.

    Thing to consider –

    • We will not going to use Site logo for this .
    • We will use HTML widget and plain CSS and HTML no JS required. So don’t worry about the CSS i will provide you

    1. Drag and drop HTML widget

    Elementor's HTML widget

    Add this HTML to your HTML widget- Follow the picture

     data-srcset

    1. Add CSS to Change or Switch logo

    CSS for HTML logo

    .header(Add your own) is the CSS Classes we added above .

    This CSS will help you adjust your logo width and it is before sticky effects.

    /* header is the CSS class we defined above */

    .header{
    /*Adjust your width as your requirement*/
    width:60%;
    transition: width .3s ease-in;
    }

     data-srcset

    Here are the CSS to change logo when user scroll down
    .elementor-sticky--effects .header {
    display: inline-block;

    /*adjust your width*/
    width:50%;
    content: url("Your Image source");

    }

     data-srcset
    Here are the full CSS

    .sec is the Section classes your have add to your Header CSS classes*/

    /* Elementor YouTube Channel*/

    selector.elementor-sticky--effects{
    background-color: rgba(133,130,255,0.5)!important
    }

    selector{
    transition: background-color .4s ease !important;
    }

    selector.elementor-sticky--effects >.elementor-container{
    min-height: 80px;
    }

    selector > .elementor-container{
    transition: min-height .1s ease !important;
    }

    /* Shrink logo*/
    .logo .elementor-image img{
    width:60%;
    transition:width .3s ease-in-out;
    }

    .elementor-sticky--effects .logo .elementor-image img {
    width: 55%;
    }

    /* Shrink Nav Menu*/
    .sec .elementor-nav-menu--main .elementor-item{
    color:green;
    font-size: 16px;

    }

    .elementor-sticky--effects  
    .sec .elementor-nav-menu--main .elementor-item{

    color:red;
    font-size: 14px;
    transition:color .3s font-size .3s ease-in;
    }

    /* Change logo when elementor sticky enable*/
    /* header is the CSS class we defined*/
    .header{
    /*add your width adustment*/
    width:60%;
    transition: width .3s ease-in;
    }

    .elementor-sticky--effects .header {
    display: inline-block;
    width:50%;
    content: url("add your image source here to change logo when scroll down");

    }

    Credits

    Result

    If you like it don’t forget to share or comment.If i made any mistake don”t forget to add your comment. We will be really appreciate and provide to give you credit.

    Thank you

    And please see the comment below to find all your answers

    Sticky Transparent Header Elementor + Scroll Changes 3

    Unable to build your own custom header or hard to understand. You can hire me

    $ 20 One Time
    • Complete header except mega menu
     data-srcset

    This site is Powered by Elementor : Theme Builder

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

    RELATED

    Tutorials

    Support

    Want to download the Template for free ?

    This website uses cookies to ensure you get the best experience on our website.