Sticky (fixed) menus are a popular website design element that remains visible on the screen as the page scrolls. They provide convenient navigation for users, especially when the page content is extensive. Additionally, adding a background color change effect on scroll can give your menu extra appeal and visual variety.

In this article, we will look at how to create a sticky menu with a color change on scroll in Elementor using CSS.

Step 1: Writing the CSS Code

Now we need CSS code to make our menu sticky and change its background color on scroll. Here is an example of CSS code you can use:

CSS

selector.elementor-sticky--effects{
  background-color: rgba(91, 146, 255)!important
}
selector{
  transition: background-color 2s ease !important;
}
selector.elementor-sticky--effects >.elementor-container{
  min-height: 70px;
}
selector > .elementor-container{
  transition: min-height 1s ease !important;
}

Step 2: Applying the CSS Code in Elementor

To apply our CSS code in Elementor, follow these steps:

In the page editing mode, find the “Advanced” settings or “CSS Classes” section for your menu. If there is no such section, check the settings of each menu item individually.

In the section, select: Motion Effects – Sticky – Top.

Effects Offset: “20”, so that the color change effect does not trigger immediately in place.

Save your changes and preview the result.

Conclusion:

Creating a sticky menu with a color change on scroll in Elementor using CSS is a great way to enhance the visual appeal of your website and provide convenient navigation for users. You can customize the background color, add transition effects, shadows, or animations to make your menu more attractive and functional.

Don’t forget to experiment with different styles and effects to match the sticky menu to your site’s design. And remember that CSS allows you to customize many other properties and styles, so don’t limit yourself to just changing the background color on scroll.

I hope this article has helped you create a sticky menu with a color change on scroll in Elementor using CSS. Good luck with your project!