Sticky Transparent Header Elementor + Scroll Changes

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

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.

01

Create Header Template

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

Elementor templateType

02

Create Section with Transparent Background

Select structure by clicking “+” icon (Here 2) > Adjust the column width as necessary > Edit Section > Style > Background > Background Type > Set it none or Clear

In order to enable Sticky Header we need to go to Section and enable Scrolling effect.

Edit Section > Scrolling Effect > Enable Sticky -Top > Select the devices – desktop /mobile /tablet to enable it or Disable> Offset to “0” > Effect offset : 20px.

Add Min-height: 90 and Z-index of 20

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.You can adjust Column width.

Site logo and Nav Menu widget

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

Site logo widget> Click the handle icon (edit) > 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) ?

  • First it look cleaner.
  • It doesn’t create any CSS conflict and much better to learn CSS in this way.

For Site logo Widget

Edit Section > Advanced > Custom CSS 

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

.logo{
width:190px; (Control your width of the logo)
max-height: 60px; (give some height of the logo)

}

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

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

Media Queries for Both Tablet and Mobile devices

NOTE: My media queries might be wrong,if it is wrong don’t forget to correct me and give your input. I will give you credit.

/* Media queries for Media Size -768px (for mobile devices)*/
@media (min-width: 320px) and (max-width: 480px){
.logo{
width: 64%;
max-width: 100%;
}}

/* Shrink logo when sticky effect is enable on Mobile*/
@media (min-width: 320px) and (max-width: 480px){
selector.elementor-sticky–effects .logo {
width: 54%;
max-width:54%;
transition: all 1s ease;
}}

/*Media queries for Media Size-1024px (Tablet)*/
@media (max-width: 1024px){
.logo {
width: 84%;
}}
/* Shrink logo when sticky enable on Tablet  */
@media (max-width: 1024px){
selector.elementor-sticky–effects selector .logo {
width: 74%;
}}

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 cover for you and it is simple easy 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

Click Nav Menu widget> Click the handle (edit) > Advanced > Find CSS Classes > Give a name as “menu” without Quotation Marks

/*Shrink the nav item when sticky*/
.menu{
font-size: 14px;

}
selector.elementor-sticky–effects .menu{
font-size: 12px;
transition: all .1s ease;
}

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 value. So the second container custom CSS will apply otherwise you wouldn’t see the effect.

Transparent + Sticky + Header Color when user scroll

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

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;

}

Not required

Hide Hamburger menu from 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 Nav menu*/
.elementor-menu-toggle:After{
position: relative;
content: “Menu”;
padding-left: 5px;
text-transform:uppercase;
font-size:11px;
transition:all 0s;
color:white;
font-family: Arial, 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;
}

/*Media Queries for Tablet and Mobile*/
/* Media Queries for Media Size -768px*/
@media (min-width: 360px) and (max-width: 480px){
.logo{
width:120px !important;
max-height:40px;
}}
/* Logo sizing after sticky -mobile */
@media (min-width: 360px) and (max-width: 480px){
selector.elementor-sticky–effects .logo {
width:60px;
max-height: 60px;
}}

/*Media queries for MS-1024px*/
@media (max-width: 1024px){
.logo {
width: 84%;
}}
/* Logo sizing after sticky -mobile */
@media (max-width: 1024px){
.elementor-sticky–effects selector .logo {
width: 74%;
}}

/*– when Sticky effect occur background color will change to Black–*/
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{
font-size: 14px;

}
selector.elementor-sticky–effects .menu{
font-size: 12px;
transition: all .1s ease;
}
/* Hide Hamburger Menu and Replace with Text*/
/*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;
}

05

How to change the menu text color when scrolling ?

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. 

selector.elementor-sticky–effects .menu .elementor-nav-menu–main .elementor-item {
color:#fff!important;
}

Final Result

Everything is working even for Mobile and Tablet devices.

You can download .json file for free

If you like it don’t forget to share and comment.If i made any mistake don”t forget to add your comment.

Author

Tags

Disclaimer

The links below are affiliate links, which means that if you buy,Foxscribbler will earn a small commission. This commission comes at no additional cost to you.

Like this Article ?

We have lot more to come from !

Better Hosting Provider
Speed and Securities are essentials in Any website

Disclaimer

The links below are affiliate links, which means that if you buy,Foxscribbler will earn a small commission. This commission comes at no additional cost to you.

Elementor-page-builder

This site is Powered by Elementor

100% Free . Theme Builder . All-in-one Business Solution

Recent posts

Elementor Page Builder

In this blog we are going to learn how to implements Google Noto Fonts step-by-step

Read More »
blog
Affiliate Marketing

Introduction If you’ve spent any time surfing blogs, then you may think of a blog

Read More »
Elementor templates
Elementor Page Builder

Find all 7 Elementor templates that comes with dozens of free & Pro templates and blocks for Homepages,Landing pages available for free download….

Read More »

Share