How to create a Transparent Sticky Header in WordPress with Elementor

How to create a Transparent Sticky Header in WordPress w…. Category: Wordpress Design with Elementor, Tags: Elementor Header, Elementor Menu, Elementor Pro Head

How to create a Transparent Sticky Header in WordPress with Elementor

How to create a Transparent Sticky Header in WordPress w…

In this video I will show you how to create a Transparent Header in Elementor with just a few clicks.

Videos that I refer to in the video:
Header Tutorial Elementor Pro:
Elementor Pro Basics for beginners:
Wordpress Basics for beginners:

Click here for the code:

→ Software that I use
Hosting & Domain provider I use on all my websites:
Elementor Free version (download link):
Elementor Pro (all 3 packages have the same features, I have the $199 one):
The whole list of software that I recommend:

→ Hardware that I use for videos
Macbook Pro 13 inch:
Camera: RX100 Mark 3:
Microphone: Zoom H1:
Mini Tripod (for the mic):

→ Helpful for beginner
How to Install Elementor and WordPress. Watch:
Elementor Beginners Tutorial. Watch:

→ My social media
Instagram Livingwithpixels:
Personal Instagram:

Some of the above links are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn’t make all these videos without it.

…  

View our service SEO Temple Web Design

 

How to create a Transparent Sticky Header in WordPress with Elementor Description

How to create a Transparent Sticky Header in WordPress w…. Category: WordPress Design with Elementor, Tags: Elementor Header, Elementor Menu, Elementor Pro Head

How to create a Transparent Sticky Header in WordPress with Elementor Tags

Elementor Header, Elementor Menu, Elementor Pro Header, Elementor Pro Header Tutorial, Elementor Sticky, Elementor Sticky Header, Elementor Transparent Header, Livingwithpixels, Sticky Header Animation, Sticky Header Scroll, Sticky Menu, Sticky Transparant Header, Sticky Transparent, Transparent Header Elementor, Transparent Menu, Transparent Sticky Header Elementor, WordPress Elementor, WordPress Elementor Header, WordPress Elementor Menu, WordPress Header

Watch How to create a Transparent Sticky Header in WordPress with Elementor on YouTube

WordPress Design with Divi

 

Related Posts on MayanSEO Blog

We offer White Label SEO

Our prices start at $300 USD per month

You can reach us using the following form:

[]
1 Step 1
keyboard_arrow_leftPrevious
Nextkeyboard_arrow_right

5 Comments

  1. Marziya Beba

    You are simply the best. I LOVE IT!

    Reply
  2. Eddy Chandra

    Hi Rino, this is awesome. My website looks slicker with this header effect. Btw, do you know how to incorporate blur effect to the header as well? I found the CSS code from this video https://www.youtube.com/watch?v=TC91gFzssDI but have no idea how to add the code into custom CSS.

    The code is as below:

    selector {

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    }

    With boosted saturation:

    selector {

    backdrop-filter:blur(20px) saturate (200%);

    -webkit-backdrop-filter:blur(20px) saturate (200%);

    }

    Really appreciate it if you can help to combine the above code into your custom CSS.

    Reply
  3. ss92

    Thanks, worked well! But because of the negative margin, all the text in the top sections of all pages moves up very close to the header. How to fix this?

    Reply
  4. Bang Tio

    Hi brother, thanks a lot for your tutorial.. greetings from indonesia 🇮🇩

    Reply

Submit a Comment

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