{"id":118012,"date":"2023-05-02T10:13:51","date_gmt":"2023-05-02T09:13:51","guid":{"rendered":"https:\/\/wpsimplefix.com\/?p=118012"},"modified":"2026-09-24T17:41:50","modified_gmt":"2026-09-24T17:41:50","slug":"change-the-elementor-header-colour-on-scroll","status":"publish","type":"post","link":"https:\/\/chkserv.com\/blog\/change-the-elementor-header-colour-on-scroll\/","title":{"rendered":"Change the Elementor header colour on scroll"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Here&#8217;s a tutorial on styling the header, to change colour on scroll in Elementor. This is based on if you&#8217;re using the Elementor pro header. So If you have not already done so, you will need to create a custom Header Template using the theme builder.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For the next steps we will be using the <strong><em>Advanced Tab<\/em><\/strong> in the Section Controls.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 1: Create a new header or edit an existing one with Elementor pro.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 2: Go to the &#8220;Advanced&#8221; tab of the header.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 3: Unlock the margin controls and set the bottom to a negative value (example: <strong>-120px<\/strong>). This will move the section that is below the header to move to the top of the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 4: You will also need to increase the Z-index of the section to make sure that it always remains on top of the content. Enter a high number, for example: <strong>100<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 5: From the Motion Effects accordion, select the Sticky option from the dropdown and set to <strong>Top<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now that we have a basic transparent header section created, we will add the scrolling effect. For the following steps we will be using the <strong><em>Style Tab<\/em><\/strong> in the Section Controls&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 6: From the colour picker, set the final background colour or gradient.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/05\/Sticky-Header-Colour-change.png\" alt=\"Sticky-Header-Colour-change\" style=\"aspect-ratio:0.6196660482374768;width:334px;height:auto\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 7: From the controls panel, toggle the Scrolling Effects selector.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 8: To achieve the desired effect, change the settings in the viewport sliders. Reduce the Top value until your header is 100% opaque (for example, 25%) then scroll to the location on your page where you want the complete opacity.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The value of the Bottom may now be raised. In the aforementioned example, we want the effect to occur as rapidly as possible, therefore we&#8217;ll place the values fairly near together (for instance, 20%). As a result, the impact will unfold over a 3% page scroll.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/05\/Sticky-Header-Apply-Effect.png\" alt=\"Sticky-Header-Apply-Effect\" style=\"aspect-ratio:0.6349809885931559;width:334px;height:auto\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/05\/Sticky-Header-scroll-effect.png\" alt=\"Sticky-Header-scroll-effect\" style=\"aspect-ratio:0.6349809885931559;width:334px;height:auto\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<br>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 9: Save your changes and preview your page. You should now see your header change color when you scroll down the page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s a tutorial on styling the header, to change colour on scroll in Elementor. This is based on if you&#8217;re using the Elementor pro header. So If you have not already done so, you will need to create a custom Header Template using the theme builder. For the next steps we will be using the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":116313,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[105,50,14,106,107],"class_list":["post-118012","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-change","tag-colour","tag-elementor","tag-header","tag-scroll"],"_links":{"self":[{"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/posts\/118012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/comments?post=118012"}],"version-history":[{"count":1,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/posts\/118012\/revisions"}],"predecessor-version":[{"id":136752,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/posts\/118012\/revisions\/136752"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/media\/116313"}],"wp:attachment":[{"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/media?parent=118012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/categories?post=118012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/tags?post=118012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}