How to change the menu background color on scroll with Elementor

In this article, we will discuss how to change the menu background when we scroll down using Elementor’s sticky effects.

Step 1: Create a sticky header using Elementor Pro.

If you don’t have a header already created, you can go to Templates > Theme Builder from the WordPress dashboard. Click on Add New, and select Header as the type of template. The Elementor editor will open and you can go ahead and create your header.

To make the header sticky, select the parent section of the header, go to the advanced tab in the Elementor editor and scroll down to Motion Effects. Here you can make the header sticky to the top by selecting the top option from the sticky dropdown menu. Add an appropriate effect offset (Effect Offset: the amount of distance from the top of the screen when the sticky effect will trigger). Adding an effect offset value is essential for the effects to take place.

Step 2: Add the CSS code to make the header/menu background change colour on scroll.

Before we add our CSS code, we need to add a class to our menu, so that we can target it and change the font color. For this example, we will use the class “sticky-menu“. Simply select your menu, go to the advanced tab and add this class inside the CSS class field.

Here is the CSS code:

👨‍💻Here is the CSS to copy and paste:

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

.elementor-sticky--effects {
   background: #3E3EF5!important; /* change the background color here*/
}

.elementor-sticky--effects .sticky-menu ul li a /* change the menu text color here*/ {
   color: #fff!important;
}

.elementor-sticky--effects, .sticky-menu ul li a {
  transition: .5s all ease-in-out;
}

You can set your own background colour by simply changing the hex code to the colour you want. We have added comments beside the CSS code so you can easily understand which code is associated with which element.

Here is a video tutorial with better guidance and an explanation of the CSS code: