--- 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-04 lang: en author: "Aditya Sharma" description: "Do you want to change the sticky header color on scroll in Elementor? A sticky header stays at the top of the page as the user scrolls down, providing quick..." image: https://theplusaddons.com/wp-content/uploads/2024/04/How-to-Change-Sticky-Header-Color-on-Scroll-in-Elementor_-1024x536.jpg word_count: 1160 --- # How to Change Sticky Header Color on Scroll in Elementor? ## - The Navigation Menu widget in The Plus Addons for Elementor lets the sticky menu background color differ from the header’s normal background color once the header locks to the top of the viewport. - The Plus Addons for Elementor Pro requires the Navigation Menu widget to be enabled under The Plus Addons for Elementor → Widgets before Sticky Main Menu styling takes effect. - Sticky Main Menu adds a dedicated style tab with Section Background Options, Normal and Sticky sub-tabs, and a Normal Color control for menu font and link color. - Sticky Menu toggle in Layout > Extra Options fixes the navigation header to the top of the screen on scroll, and the sticky state can use a solid color, gradient, or blurred-glass effect. Do you want to change the sticky header color on scroll in Elementor? A sticky header stays at the top of the page as the user scrolls down, providing quick access to important navigation elements. Changing the sticky header background color on scroll makes the navigation easier to read against different sections of the page and gives visitors a clear visual cue as they move through your content. Table Of Contents ## What It Does The Navigation Menu widget in The Plus Addons for Elementor lets you set a Sticky Menu background color that is different from the header's normal (non-sticky) background color. Once a visitor scrolls past the header's normal position and it locks to the top of the viewport, the Sticky tab's background settings take over so the header can switch to a new solid color, keeping the menu legible against whatever content is now scrolling behind it. ***Requirement – This is a Pro widget.*** You need [The Plus Addons for Elementor Pro](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text), with the Navigation Menu widget enabled under **The Plus Addons for Elementor → Widgets**. ## Why It Matters A header that keeps the exact same background color whether it's sitting over a hero image or over plain white content can lose contrast and become hard to read once it goes sticky. Giving the sticky state its own background color keeps navigation text legible against every section of a long page, and gives visitors a clear visual signal that the header has switched into its fixed, always-visible state. ## What You Get - A dedicated **Sticky Main Menu** style tab, separate from the header's normal styling - A **Sticky** background tab under Section Background Options for solid-color (or, separately, blurred-glass) sticky backgrounds - A **Normal Color** control to adjust the menu font/link color independently, so text stays readable against the new sticky background ## Benefits - **Better contrast** – a sticky-only background color keeps the menu readable as page content scrolls behind it - **No custom CSS** – the Sticky tab is a native Elementor-style control, not a code snippet - **Independent of the normal header** – you can keep a transparent or brand-colored header at the top of the page and only apply a solid color once it goes sticky ## Capabilities The Sticky Main Menu style tab exposes a full Section Background Options panel with its own Normal/Sticky sub-tabs, so the sticky background can use a solid color, gradient, or (per a related walkthrough) a blurred-glass effect, independent of whatever background type is used for the header's normal, non-sticky state. The Sticky Menu toggle itself lives in the widget's Layout > Extra Options tab and is required before any sticky-specific styling takes effect. ## How It Works Enabling Sticky Menu fixes the Navigation Menu widget to the top of the viewport once the visitor scrolls past its normal position. From that point on, the widget renders using its Sticky tab styles instead of its Normal tab styles – including background color, so the color you set under Section Background Options > Sticky only appears after the header has locked into place, never before. ## How to Use It To do this, add the Navigation Menu widget to the header template and set up the layout as per your requirement, then follow the steps. For instance, we have created a header with the Site Logo, Navigation Menu, and Header Meta Content widgets of The Plus Addons for Elementor. > *Note: To create the header template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* or you can use Elementor Pro if you are already using it.* 1. From the **Layout** tab, select **Horizontal Menu** from the **Menu Direction** section after selecting the appropriate **Menu Type**. Then add the appropriate menu. 2. After that, enable the **Sticky Menu** toggle from the **Extra Options** tab. Use this when you want the navigation header to stay fixed at the top of the screen while visitors scroll. If you also want the header to shrink in height as visitors scroll, see [How to Create a Shrinking Header Effect in Elementor?](https://theplusaddons.com/docs/shrinking-header-effect-in-elementor/) Enabling the Sticky Menu toggle in the Extra Options tab 3. Then go to **Style** > **Sticky Main Menu** tab. 4. Scroll down to the **Section Background Options** section and go to the **Sticky** tab. 5. From the **Background Type** section, add a solid color. Make sure to select a different color than the normal header background color. For a frosted glass effect instead of a solid color, see [How to Create a Blurred Glass Sticky Header in Elementor?](https://theplusaddons.com/docs/blurred-glass-sticky-header-in-elementor/) 6. For better contrast, change the menu font color from the **Normal Color** section under the **Normal** tab. Now when you scroll down, you will see the sticky header background color changing. Sticky header switching to its solid Sticky-tab background color on scroll ***Also Read:*** [How to Create a Transparent Sticky Header Effect in Elementor](https://theplusaddons.com/docs/transparent-sticky-header-effect-in-elementor/) if you want a see-through header before it goes sticky. ***Also Read:*** [How to Create a Blurred Glass Sticky Header in Elementor](https://theplusaddons.com/docs/blurred-glass-sticky-header-in-elementor/) for a frosted-glass sticky background instead of a solid color. ## Use Cases - Agency and portfolio websites where the header needs to stay branded and legible as visitors scroll through long pages - WooCommerce stores where a sticky navigation with a contrasting scroll color keeps the header visible over product images - Landing pages that use a transparent header at the top and need a solid background color to appear once the user scrolls ## Limitations - Sticky background color styling requires the Sticky Menu toggle to already be enabled; without it, the Sticky style tab has no effect. - Sticky background color and sticky logo-swap-on-scroll share the same Sticky state, so enabling one can interact with the other – see Troubleshooting. - This walkthrough covers the Pro Navigation Menu widget; the free Navigation Menu Lite widget does not include a Sticky Main Menu style tab. ## Troubleshooting - **Text color doesn't change on scroll, only the background does.** Ticket #19575 ("How to change the navigation color?") – the menu's **Normal Color** setting is independent of the Sticky background color. If only the background switches but the link text stays the same shade, set the text/link color separately under the **Sticky** tab as well as the Normal tab. - **Wrong background color applies once the header goes sticky.** Ticket #19702 ("color of sticky header") – this usually means the color was set on the **Normal** tab instead of the **Sticky** tab (or vice-versa). Double-check which of the two tabs you're editing under Section Background Options before picking a color. - **Enabling the sticky background color disables the logo swap on scroll.** Ticket #20854 ("Sticky Header + Background color change + switch logo") – if you're also using a different logo for the sticky state, re-apply the logo-swap setting after changing the sticky background, since both features live under the same Sticky state and one change can require re-saving the other. ## Suggested Reading - [How to Create a Transparent Sticky Header Effect in Elementor](https://theplusaddons.com/docs/transparent-sticky-header-effect-in-elementor/) - [How to Create a Blurred Glass Sticky Header in Elementor](https://theplusaddons.com/docs/blurred-glass-sticky-header-in-elementor/) - [How to Create a Shrinking Header Effect in Elementor](https://theplusaddons.com/docs/shrinking-header-effect-in-elementor/)