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

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

To shrink logo we need to add some CSS ,let add CSS classes as “logo” to the site logo widget advanced setting .

Site logo/Advanced/CSS Classes – Give a name as “logo” without Quotation mark.

We could add Custom CSS to the site logo itself but little messy so we directly add CSS to the section setting .

Why do we use CSS classes instead of Normal Elementor Classes (.elementor-element-232f) or selector ?

  • First it look cleaner.
  • It doesn’t create any CSS conflict when you copy and paste the CSS from one to another.
  • You can call this .classes or #id wherever you need without writing over and over again (must be added to your child theme or customize setting)

  • Site logo Widget
  • Site logo/Section/Advanced/Custom CSS 

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

     

    .logo .elementor-image img{
    width:60%;
    }

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

    Same path as before ,just add the code below previously added CSS code
    Edit Section/Advanced/Custom CSS

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

    .elementor-sticky--effects .logo .elementor-image img {
    width: 55%;
    transition: all .3s ease-in-out;
    }

  • 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

    Nav Menu widget/Advanced –  CSS Classes – Give a name as “menu” without Quotation Marks

    /*Shrink the nav item when sticky*/
    .menu .elementor-nav-menu a{
    font-size: 14px;
    color:#000;}


    .elementor-sticky--effects .menu .elementor-nav-menu a{
    font-size: 12px;
    transition: all .3s ease-in-out;
    color:#fff;
    }

    04

    Create Sticky Section with Background color when user scroll

    In this step,we need to create Transparent+ sticky + background color header when user scroll down when it effect offset reach to 10 px.

    And i almost forgot to mention,don’t forget to add min-height valueSo the second container custom CSS will apply otherwise you wouldn’t see the effect.

    Sticky Transparent Header Elementor + Scroll Changes 2

    Add some Custom CSS for section and min-height value.Watch the Elementor Tutorials to learn more

    Sticky Transparent Header Elementor + Scroll Changes 3
    Play Video

    /*—- 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;

    }

    05

    How to change the "Menu Text" color when scrolling or sticky effect apply?

    This is the question it keep buzzing me inside my ear when Anders Jespersgaard from Elementor Pro Experts Facebook Group ask me the question. I tried to find it on internet but very tricky and i think i didn’t ask right keyword properly i guess.

    It take me more than a week to get the right code because i am not PRO at this level but curious to do crazy stuff.

    So I find your answer how to change the menu text color when scrolling then ? from like black to white and it is really easy too.

    Simply add this code to the section where you put all your code.
    Note: This code is not available on .json file that i provided below. 

    /*menu item before sticky effect applied*/
    .menu .elementor-nav-menu a{
    color:#000;
    }

    .elementor-sticky--effects .menu .elementor-nav-menu a {
    color:#EEEFF2;
    transition:all .5s ease;
    font-size: .87rem;
    }

    Note : code is not available for Hover,Active and Visited . If you are going to do it anyway then simply change the tag to :hover or :active etc.

    Sticky Transparent Header Elementor + Scroll Changes 4

    06

    How to Switch/Change "Logo" when scrolling ?

    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.

    So don’t worry here the CSS you can add it to  achieve the same effect Enjoy

    /* ———–Logo after when .elementor-sticky–effects apply————-*/
    /* ——–Give CSS ID under Advanced > CSS ID > Logo——-*/

    /* — The code will be something like this — */
    /*due to Firefox*/
    .elementor-sticky–effects #logo .elementor-image img{
    content:url(“Your URL”);
    width:Adjust your width with percentage(%);
    }

    /*Link is not clickable: code is not working on Firefox*/
    .elementor-sticky--effects #logo .elementor-image {
    content:url(" ");
    width:21%;
    vertical-align: middle;
    display: inline-block;\
    }

    Sticky Transparent Header Elementor + Scroll Changes 5

    Not Required

    Hide Hamburger Menu on Mobile

    If you want to remove Hamburger menu from mobile and replace with Text then add this Custom code to the section. Like we did on Logo,Nav menu and Min-section . 

    or follow Snifflevalve video or blog

    Sniffle Valve
    Play Video

    /*Add after name to the Elementor Nav menu */
    .elementor-menu-toggle:After{
    position: relative;
    content: “Menu”;
    padding-left: 5px;
    text-transform:uppercase;
    font-size:11px;
    transition:all 350ms ease-in;
    color:white;
    font-family: “Helvetica”, sans-serif;
    }
    /*Disable Hamburger menu*/
    .elementor-menu-toggle i::before {
    display: none;
    }

    Here are the full CSS

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

    .logo{
    width:170px;
    max-height: 60px;

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

    selector.elementor-sticky--effects .logo {
    max-height: 45px;
    width: 100px;
    transition: all 1s ease;
    }

    /*– when Sticky effect occur background color will change to #EFE207–*/

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

    /*– 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;
    }
    /*Shrink the nav item when sticky*/
    .menu .elementor-nav-menu a{
    font-size: 14px;
    color:#000;

    }
    .elementor-sticky--effects .menu .elementor-nav-menu a{
    font-size: 12px;
    transition: all .3s ease-in-out;
    color:#fff;
    }

    /* —–Logo after when .elementor-sticky–effects apply—-*/
    /* —–Give CSS ID under Advanced > CSS ID > Logo——-*/

    /* — The code will be something like this — */
    .elementor-sticky--effects #logo .elementor-image {
    content:url(" ");
    width:21%;
    vertical-align: middle;
    display: inline-block;}

    /* Hide Hamburger Menu and Replace with Text,Thanks to Lyle*/
    /*Add ::after name to the Nav menu*/
    .elementor-menu-toggle:After{
    position: relative;
    content: “Menu”;
    padding-left: 5px;
    text-transform:uppercase;
    font-size:11px;
    transition:all 0s;
    color:#000;
    font-family: Arial, Helvetica, sans-serif;
    }
    /*Disable Hamburger menu*/
    .elementor-menu-toggle i::before {
    display: none;
    }

    Credits

    Final 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

    Sticky Transparent Header Elementor + Scroll Changes 7

    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.