{"id":25016,"date":"2023-08-04T10:13:19","date_gmt":"2023-08-04T07:13:19","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=25016"},"modified":"2025-08-05T10:22:33","modified_gmt":"2025-08-05T07:22:33","slug":"change-sticky-header-color-scroll","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/change-sticky-header-color-scroll\/","title":{"rendered":"Change the transparency of a sticky header on scroll"},"content":{"rendered":"\n

Overview<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

[callout type=”note”]The following will change the transparency of the header background, not the entire header. Making the entire header transparent would hide valuable information from visitors.[\/callout]<\/p>\n\n\n\n

Prerequisite<\/h2>\n\n\n\n

Create a custom Header template using the Theme Builder. For details, see Create a Header template using flexbox containers<\/a>.\u00a0<\/p>\n\n\n\n

Start by creating a two column header section with your logo in an Image widget and a Navigation widget.<\/p>\n\n\n\n

Create transparent header<\/h2>\n\n\n\n

Follow these steps:<\/strong><\/p>\n\n\n\n

    \n
  1. Login to WP Admin.<\/li>\n\n\n\n
  2. Edit the header by clicking its handle \"Change. The Edit Container panel shows on the left.
    \"Change<\/li>\n\n\n\n
  3. Click Advanced<\/strong>.<\/li>\n\n\n\n
  4. Expand Layout<\/strong>.<\/li>\n\n\n\n
  5. Set the following:\n