help center

On this page

Change sticky header color on scroll

Last Update: March 11, 2024

Overview

Changing a transparent header to an opaque header when scrolling can be done in different ways, including writing your own code. But it is easier doing it using the Elementor built-in Scrolling Effects feature.

Prerequisite

Create a custom Header Template using the theme builder. For details, see How To Create A Sticky Transparent Header Effect

Start by creating a two column header section with your logo in an Image widget and a Navigation widget.

Create transparent header

Follow these steps:

  1. Login to WP Admin.
  2. Edit the header by clicking its handle Change sticky header color on scroll 1. The Edit Container panel shows on the left.
    Change sticky header color on scroll 4
  3. Click Advanced.
  4. Expand Layout.
  5. Set the following:
    • Margin (Bottom) – a negative value (for example, -125px). This moves the section that is below the header to the top of the page.
    • Z-index – This should always remain on top of the content. You may enter any number higher than the rest of your website’s content. For example 1,000.
  6. Expand Motion Effects.
  7. Set Sticky as Top.
  8. In Sticky On, choose Desktop, Tablet Portrait, and Mobile Portrait. This makes the change visible on all three devices.
  9. Click Style.
    Change sticky header color on scroll 2
  10. Go to Background > Normal.
  11. Set the final background color or gradient in the color picker.
    Change sticky header color on scroll 6
  12. Toggle Scrolling Effects. The scrolling effect settings displays.
    Change sticky header color on scroll 5
  13. Click edit icon for Transparency.
    Change sticky header color on scroll 3
  14. From the viewport sliders, adjust the values to create the desired effect. Scroll to the spot on your page where you want to have the full opacity.
    • Decrease the Top value until your heading has 100% opacity (example: 25%). 
    • Increase the value of the Bottom. If you want the effect to happen quickly, set the values very close to Top (example: 22%). This causes the effect to happen over a 3% page scroll.
  15. Click Publish.
Note
The Viewport slider determines the area of the page where the effect is applied.  For details, see What Is The Viewport Control?  and Understanding the Scrolling Effects Viewport – Elementor WordPress Tutorial

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article