diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index a25fdce175a..a0c694f6f91 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3495,7 +3495,8 @@ const SnippetOptionWidget = Widget.extend({
                 }
                 // If change had no effect then make it important.
                 // This condition requires extraClass to be set.
-                if (!weUtils.areCssValuesEqual(styles.getPropertyValue(cssProp), cssValue, cssProp, this.$target[0])) {
+                if (!params.preventImportant && !weUtils.areCssValuesEqual(
+                        styles.getPropertyValue(cssProp), cssValue, cssProp, this.$target[0])) {
                     this.$target[0].style.setProperty(cssProp, cssValue, 'important');
                 }
                 if (params.extraClass) {
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 922efa6694e..98095ead397 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -952,6 +952,10 @@ header {
         border-radius: o-website-value('menu-border-radius') !important;
         box-shadow: o-website-value('menu-box-shadow') !important;
     }
+    // Prevent the color of the header to impact the color of the nav.
+    &.o_header_is_scrolled, &.o_transitioning.o_header_affixed {
+        background-color: transparent !important;
+    }
 }
 
 @if $-off-canvas-hamburger {
@@ -1288,7 +1292,9 @@ header {
 
         > .navbar {
             @include o-apply-colors(1); // Reset to default colored components
+            // Prevent the nav color/gradient to impact the header color.
             background-color: transparent !important;
+            background-image: none !important;
             border-color: transparent;
             color: inherit;
 
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 2e6712530d2..75a17e18a41 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -853,6 +853,7 @@
             class="o_we_sublevel_1"
             id="option_header_transparent_color"
             data-select-style="true"
+            data-prevent-important="true"
             data-css-property="background-color"
             data-color-prefix="bg-"
             data-excluded="theme, common, custom"/>