{"id":7656,"date":"2022-04-24T12:57:23","date_gmt":"2022-04-24T12:57:23","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=7656"},"modified":"2023-06-13T09:07:46","modified_gmt":"2023-06-13T09:07:46","slug":"create-a-color-changing-sticky-header-without-code","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/create-a-color-changing-sticky-header-without-code\/","title":{"rendered":"Create a Color Changing Sticky Header Without Code [PRO\/HOSTING]"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7656\" class=\"elementor elementor-7656\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-597513ce thesinglevideo elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"597513ce\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1670efd6\" data-id=\"1670efd6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2e355756 elementor-widget elementor-widget-video\" data-id=\"2e355756\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/PJp87rmeLcI&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6bf5eee5 thesinglevideoOver elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6bf5eee5\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3aa0863e\" data-id=\"3aa0863e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-153d4979 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"153d4979\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-3561\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-3561\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-3562\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-3562\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-3561\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-3561\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-3561\" tabindex=\"0\" hidden=\"false\"><p>In this Tips &amp; Tricks video, we\u2019ll create a sticky header in Elementor that changes color transparency as visitors scroll through our site.<\/p><p>The tutorial will cover:<br \/>\u2714\ufe0e Sticky header uses and benefits<br \/>\u2714\ufe0e Make a header sticky<br \/>\u2714\ufe0e Changing color transparency on scroll<br \/>\u2714\ufe0e And much more!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-3562\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-3562\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-3562\" tabindex=\"0\" hidden=\"hidden\"><p>In this video, we\u2019ll create a sticky header in Elementor that changes color as visitors scroll through our site. Stick around to see how it\u2019s done!<br \/><br \/>Hi Everyone, This is Shiri from Elementor. When designing our site, one of the most important elements in it is the header &#8211; It lets visitors know where they are via our logo, allows them to navigate the site with ease and sometimes includes one or several CTA\u2019s such as contact us or even buy a product or a service.<\/p><p>Generally speaking, it\u2019s a good practice to keep this navigation bar accessible by making it sticky\u2026but this doesn\u2019t mean our header needs to be static. We can add some color and different effects to make it more dynamic.<\/p><p>So let\u2019s jump right in and see how we can do this with Elementor!<\/p><p>We\u2019ll work on a Header template and use motion effects to achieve the color changing effect when we scroll; both are Elementor Pro features, so make sure you have either the Elementor Pro plugin or that you\u2019re working on an Elementor Cloud Website.<\/p><p>Ok, let\u2019s begin in the homepage, with this drone store.<\/p><p>As you can see, we already have a header but it\u2019s not really sticking around as I scroll through the website.<\/p><p>We want to make sure that A &#8211; the header sticks to the top of our page, and B &#8211; it starts off with a transparent background and changes color only when we scroll.<\/p><p>Move through different site parts by hovering the cursor over them<\/p><p>This yellow button indicates that this is a template outside of the page we\u2019re currently working on. Click Edit header to\u2026 um\u2026edit the header.<\/p><p>The first step is to make it transparent. Click the container and under style, choose a transparent background color. I\u2019m using a global color for this but we can also use a custom color.<\/p><p>Next, head over to the Advanced tab and give it a negative margin to make the header appear over the hero image. To make sure the header is visible above all other elements, set the appropriate z-index.<br \/>I\u2019ll set it 9,999 just to be sure.<\/p><p>Now that we\u2019re done with the background color, expand the motion effects tab and set the sticky setting to top.<\/p><p>Let\u2019s see how we\u2019re doing so far. This looks gre\u2014 Ok, we already have a small hiccup with the nav bar here.<\/p><p>\u2026And again with the logo and the text here.<br \/>Let\u2019s open the editor panel again to fix this.<br \/>We want the background color to change on scroll, so for this option, go to the Style tab and start by changing the background to a solid color.<br \/>This is a bit too heavy for this design, so we\u2019ll make it a little more transparent. Let\u2019s see here\u2026 Fantastic. Already looking much better.<\/p><p>To add the color changing effect, toggle Scrolling Effects to on and choose Transparency. Set it to Fade in and set the appropriate values. Because we want the color change to happen very early on page scroll, we need to set it to a low percentage and make the start and finish points of the effect very close together.<\/p><p>Once that step is done, close the transparency window and make the effects relative to the entire page. We\u2019ll update the page to save the changes we\u2019ve made.<\/p><p>Time to hide the editor panel and see it in action! Amazing!<\/p><p>We started off with a transparent header that changes to a more solid color as we scroll and stays at the top of the page the entire time. Looking good! (It\u2019s not bragging if it\u2019s true).<\/p><p>I hope you found this video helpful. If you did, be sure to give it a like to let us know what kind of content we should continue making for you.<\/p><p>This Shiri from Elementor signing off. And until next time &#8211; keep creating!<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this Tips &amp; Tricks video, we\u2019ll create a sticky header in Elementor that changes color transparency as visitors scroll through our site. The tutorial will cover: \u2714\ufe0e Sticky header uses and benefits \u2714\ufe0e Make a header sticky \u2714\ufe0e Changing color transparency on scroll \u2714\ufe0e And much more! Transcript In this video, [&hellip;]<\/p>\n","protected":false},"author":20,"featured_media":7658,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4,22],"tags":[41],"class_list":["post-7656","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","category-trending-now-selection-guides-tutorials","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create a Color Changing Sticky Header Without Code [PRO\/HOSTING] - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/create-a-color-changing-sticky-header-without-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Color Changing Sticky Header Without Code [PRO\/HOSTING] - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this Tips &amp; Tricks video, we\u2019ll create a sticky header in Elementor that changes color transparency as visitors scroll through our site. The tutorial will cover: \u2714\ufe0e Sticky header uses and benefits \u2714\ufe0e Make a header sticky \u2714\ufe0e Changing color transparency on scroll \u2714\ufe0e And much more! Transcript In this video, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/create-a-color-changing-sticky-header-without-code\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-24T12:57:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-13T09:07:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/04\/Changing-Color-header.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Aviva Darab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aviva Darab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a Color Changing Sticky Header Without Code [PRO\/HOSTING] - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/create-a-color-changing-sticky-header-without-code\/","og_locale":"en_US","og_type":"article","og_title":"Create a Color Changing Sticky Header Without Code [PRO\/HOSTING] - Academy","og_description":"Overview Transcript Overview In this Tips &amp; Tricks video, we\u2019ll create a sticky header in Elementor that changes color transparency as visitors scroll through our site. The tutorial will cover: \u2714\ufe0e Sticky header uses and benefits \u2714\ufe0e Make a header sticky \u2714\ufe0e Changing color transparency on scroll \u2714\ufe0e And much more! Transcript In this video, [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/create-a-color-changing-sticky-header-without-code\/","og_site_name":"Academy","article_published_time":"2022-04-24T12:57:23+00:00","article_modified_time":"2023-06-13T09:07:46+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/04\/Changing-Color-header.jpeg","type":"image\/jpeg"}],"author":"Aviva Darab","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Aviva Darab","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/create-a-color-changing-sticky-header-without-code\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/create-a-color-changing-sticky-header-without-code\/"},"author":{"name":"Aviva Darab","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/6ce87fcf655168e5ac55e43148a99449"},"headline":"Create a Color Changing Sticky Header Without Code [PRO\/HOSTING]","datePublished":"2022-04-24T12:57:23+00:00","dateModified":"2023-06-13T09:07:46+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-a-color-changing-sticky-header-without-code\/"},"wordCount":736,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-a-color-changing-sticky-header-without-code\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/04\/Changing-Color-header.jpeg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout","trending now selection \u2013 guides and tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/create-a-color-changing-sticky-header-without-code\/","url":"https:\/\/elementor.com\/academy\/create-a-color-changing-sticky-header-without-code\/","name":"Create a Color Changing Sticky Header Without Code [PRO\/HOSTING] - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-a-color-changing-sticky-header-without-code\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-a-color-changing-sticky-header-without-code\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/04\/Changing-Color-header.jpeg","datePublished":"2022-04-24T12:57:23+00:00","dateModified":"2023-06-13T09:07:46+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/create-a-color-changing-sticky-header-without-code\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/create-a-color-changing-sticky-header-without-code\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/create-a-color-changing-sticky-header-without-code\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/04\/Changing-Color-header.jpeg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/04\/Changing-Color-header.jpeg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/create-a-color-changing-sticky-header-without-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"Create a Color Changing Sticky Header Without Code [PRO\/HOSTING]"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/6ce87fcf655168e5ac55e43148a99449","name":"Aviva Darab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5456d642d6417c9b72a48f8fbec624cc1336f934ce83732b6fa2358ab0c31bfe?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5456d642d6417c9b72a48f8fbec624cc1336f934ce83732b6fa2358ab0c31bfe?s=96&d=mm&r=g","caption":"Aviva Darab"},"description":"Aviva is a Designer and Educator at Elementor. She\u2019s experienced in web and graphic design and enjoys sharing her knowledge with others. She stays fueled with coffee, dark chocolate, and Pinterest.","url":"https:\/\/elementor.com\/academy\/author\/user-5e36e0380be94\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=7656"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7656\/revisions"}],"predecessor-version":[{"id":11296,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7656\/revisions\/11296"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/7658"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=7656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=7656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=7656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}