---
title: "How to Change Sticky Header Color on Scroll in Elementor?"
url: https://theplusaddons.com/docs/sticky-header-color-on-scroll/
date: 2024-04-12
modified: 2026-09-11
lang: en
author: "Aditya Sharma"
description: "Do you want your header to change colour when visitors scroll? A header that turns solid once it sticks stays readable over every section of the page, and tells visitors..."
image: https://theplusaddons.com/wp-content/uploads/2024/04/How-to-Change-Sticky-Header-Color-on-Scroll-in-Elementor_-1024x536.jpg
word_count: 516
---

# How to Change Sticky Header Color on Scroll in Elementor?

## 

- The Plus Addons for Elementor Navigation Menu widget sets one header colour at the top of the page and another when the header is stuck.
- Sticky Menu turns on in Content > Extra Options, and the widget must sit in the same container as the logo and buttons inside the header template.
- Style > Sticky Main Menu > Section Background Options controls the sticky colour, while Normal, Hover and Active tabs keep the menu text readable on the published page.

Do you want your header to change colour when visitors scroll? A header that turns solid once it sticks stays readable over every section of the page, and tells visitors the page has moved on.

With the Navigation Menu widget from The Plus Addons for Elementor, you set one colour for the header at the top of the page and another for when it is stuck.

*To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, [click here](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/navigation-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

Table Of Contents

## Before You Start

- **Edition:** **Pro** — the Navigation Menu widget is part of The Plus Addons for Elementor Pro. The free **Navigation Menu Lite** widget does not have this option.- **Widget to enable:** Navigation Menu, switched on under **The Plus Addons > Widgets**.- **A header template.** Add the widget to your site's header so the menu shows on every page. Build the header with the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/) or with Elementor Pro's Theme Builder.- **A WordPress menu** under **Appearance > Menus**, if you use the **Default** menu type.

## Step 1: Turn on Sticky Menu

Build your header with the Navigation Menu widget in the same container as your logo and buttons. In **Content > Extra Options**, switch on **Sticky Menu**.

## Step 2: Move the header colour into the widget

If you gave the header container a background in its own Style tab, remove it. Then go to **Style > Sticky Main Menu > Section Background Options** and set the normal colour on the **Normal** tab.

> *A background on the container itself always wins, so the sticky colour would never appear.*

## Step 3: Set the sticky colour

On the **Sticky** tab, set **Background Type** to Classic (or Gradient) and pick a different colour.

![Background Type on the Sticky tab of Section Background Options](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-sticky-background.webp)

## Step 4: Keep the text readable

Higher up in the same section, the **Normal**, **Hover** and **Active** tabs set the menu text colours while the header is stuck. Change **Normal Color** if the text needs more contrast on the new background.

![Normal Color in Style > Sticky Main Menu, used while the header is stuck](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-sticky-text-color.webp)

Publish and scroll: the header changes colour as it sticks.

![The header after scrolling, with a dark sticky background and white menu text](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-result-sticky-color.webp)

## Limitations

- **Pro only.** Navigation Menu Lite has no sticky options.- **The editor does not scroll the page the way a visitor does. Check sticky effects on the published page.**- **The logo does not change by itself.** To swap the logo on scroll, see [how to change the logo in a sticky header](https://theplusaddons.com/docs/change-logo-in-sticky-header-on-scroll-in-elementor/).

## Troubleshooting

### The colour never changes

If the header container has its own background (container > Style > Background), that background wins over the widget’s **Sticky** tab. Remove it and set the normal colour in **Style > Sticky Main Menu > Section Background Options > Normal** instead.

### The background changes but the text doesn’t

Set the colours in **Style > Sticky Main Menu > Normal / Hover / Active**. The **Main Menu** colours apply until the header sticks; while it is stuck, the Sticky Main Menu colours take over.

## Related Docs

- [Create a transparent sticky header](https://theplusaddons.com/docs/transparent-sticky-header-effect-in-elementor/)- [Create a blurred glass sticky header](https://theplusaddons.com/docs/blurred-glass-sticky-header-in-elementor/)- [Create a shrinking header](https://theplusaddons.com/docs/shrinking-header-effect-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before I can change a sticky header color on scroll in Elementor?**
A: The setup depends on the Navigation Menu widget from The Plus Addons for Elementor Pro, plus a header template where that widget sits in the site header. The page also notes that if you use the Default menu type, you need a WordPress menu under Appearance > Menus. One gotcha: the free Navigation Menu Lite widget does not have sticky options, so this effect is tied to the Pro widget.

**Q: Why does the sticky header color not change when I scroll?**
A: A container background usually overrides the widget’s sticky color, so the sticky state never gets a chance to show. The fix is to remove any background set on the header container itself and move the normal color into Style > Sticky Main Menu > Section Background Options > Normal. That way, The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH can switch cleanly between the normal and sticky states.

**Q: How do I keep the menu text readable after the header turns sticky?**
A: The text colors need to be set separately for the sticky state. In Style > Sticky Main Menu > Normal / Hover / Active, adjust the menu text colors so they contrast with the new background. The page calls out Normal Color specifically when more contrast is needed, which matters because a darker or lighter sticky background can make the default text hard to read.

**Q: Can I use this sticky color change with a transparent or blurred glass header?**
A: The tutorial points to related docs for both a transparent sticky header and a blurred glass sticky header, which means this color-change setup fits into those same sticky-header patterns. The key idea is that the Navigation Menu widget controls the sticky background inside the widget, so it can be paired with different visual styles as long as you manage which layer owns the background.

**Q: Does this work in the editor preview or only on the live page?**
A: The effect should be checked on the published page, because the editor does not scroll like a real visitor session. That matters for sticky behavior in general: what looks static in the editor can still change correctly once published. The page explicitly says to publish and scroll to confirm that the header changes colour as it sticks.

**Q: What is the best way to set up a sticky header color change without breaking other header effects?**
A: Keep the header container background out of the way and let the Navigation Menu widget own both states. Set the normal color in Style > Sticky Main Menu > Section Background Options > Normal, then choose a different Sticky tab background type such as Classic or Gradient. That separation prevents conflicts and also makes it easier to combine this effect with other sticky-header styles like shrinking headers or logo swaps.