Elementor – Sticky Transparent Header + background color & shrink the logo when user scroll

How to Create Sticky Transparent Header+ background color & shrink the logo without the need of 3rd party Elementor addons just by Elementor Pro...

This is one of the most common question,i have found on Elementor Official Groups by taking question as an example,i was on a journey to 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 Custom CSS.

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

Updated -

Almost forgot to tell you that how i got all those Elementor code and i want to share it with you today. if you learn using Inspect Elements more you can understand some basics like me. Just right click and hover on any elements to learn more. ( refer gif ). 

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

Section with Transparent Background

03

Drag and Drop Site Logo & Nav Menu widget

Next step is to drag and drop Site logo and Don’t add any style to your logo because we will manually add the custom CSS to the logo.But you can style the nav menu widget because we will not add any custom CSS to it.

Site logo and Nav Menu widget

Custom CSS for Site Logo when user scroll and to shrink the logo

04

Create Transparent 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

Additional info

Hide Hamburger menu from Mobile

If you want to remove Hamburger menu from mobile and replace with Text then add this Custom code .

Final Result

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.

Elementor-page-builder

This site is Powered by Elementor

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

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

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