How to change the menu background color on scroll with Elementor

DEMO

In this guide, we’ll show you how to modify your menu background dynamically when users scroll, utilizing Elementor sticky effects.

Step 1: Create a Sticky Header with Elementor Pro

If you haven’t already created a header, follow these steps:

1. Go to Templates > Theme Builder: From your WordPress dashboard, navigate to the Theme Builder section.
2. Add a New Header: Click “Add New” and choose “Header” as the template type. This will open the Elementor editor.
3. Design Your Header: Use Elementor’s tools to customize your header according to your preferences.

Once your header is ready, you’ll need to make it sticky:

• Select the Parent Section of the Header: In the Elementor editor, choose the header section.
• Navigate to the Advanced Tab: Go to the Advanced tab and scroll down to the “Motion Effects” settings.
• Enable Sticky Effects: In the Sticky dropdown menu, select “Top” to make the header stick to the top of the page.
• Adjust the Effect Offset: Set an appropriate effect offset value. This defines the distance from the top of the screen when the sticky effect will activate. Setting this value is crucial for the sticky effect to function properly.

Step 2: Add CSS to Change the Header/Menu Background Color on Scroll

To change the header or menu background color dynamically as users scroll, follow these steps:

1. Add a Custom Class to Your Menu
   • In Elementor, select your menu and navigate to the Advanced tab.
   • Add a CSS class (e.g., sticky-menu) in the CSS Classes field. This allows you to target the menu specifically for styling changes.
2. Insert the CSS Code
   Below is the CSS code you’ll need to implement the background color change on scroll. You can customize the background color by replacing the hex code with your desired color.

👨‍💻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;
}

Transition: Ensures a smooth background color change effect.
Sticky-Active: The class applied when the menu is in a sticky state.

💡 Tip: Add comments to your CSS code to understand which parts affect specific elements.

Guided Video Tutorial

For a detailed walkthrough, watch our for clear instructions and explanations of the CSS code implementation.