October 7, 2022 Cadester

Change the header background colour on scroll in Elementor

This tutorial explains how to easily change the colour of your sticky header on scroll,  in WordPress site, using Elementor.

I’ve found a great video (below) on how to change the background of your header when scrolling with Elementor Pro sticky scroll. I’ve added the steps here so I can reference it quickly in the future, but for first timers, please watch the video to really understand the process.

Click on the edit header section and set up sticky.

  1. Go to advanced > motion effects > sticky > top
  2. Effects offset and choose the amount of pixels you want the page to scroll before the effect happens.
  3. Go to Advanced > Custom CSS and paste in the below code
  4. change the colours you desire in the CSS (highlighted in green)

Paste this code into the custom CSS.

CSS code:

/* — Changing the menu background on scroll effect — */

.elementor-sticky--effects {

   background: #3E3EF5!important; /* change the background color here*/

}

.elementor-sticky--effects .sticky-menu-items ul li a /* change the menu text color here*/ {

   color: #fffffff!important;

}

.elementor-sticky--effects, .sticky-menu-items ul li a {

  transition: .5s all ease-in-out;

}

Here’s Jeffrey’s video from Lytbox, who explains this process in detail.

Menu Background Color Change On Scroll With Elementor's Sticky Header
, ,
Contact

Let's make some magic.

So you’ve got this far hey? You must really like me.
Go ahead, smash that contact button.

Let’s Talk About Your Project

A design experts touch can help your project deliver and get results. Let’s talk.

Let’s Talk About Your Idea

Not sure how to get moving with your design idea? That’s what I’m here for.

Let’s Talk About Your Content

You might even need help with your content. Yep, I do that too!

Fill out the form below to contact me.

 

    Contact