diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 0babf937e95..bd719db44f4 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1980,6 +1980,29 @@ options.registry.WebsiteLevelColor = options.Class.extend({
     },
 });
 
+options.registry.HeaderLayout = options.registry.WebsiteLevelColor.extend({
+    /**
+     * @overide
+     */
+    async customizeWebsiteViews(previewMode, widgetValue, params) {
+        const _super = this._super.bind(this);
+
+        if (params.name === 'header_sidebar_opt') {
+            // When the user selects sidebar as header, make sure that the
+            // header position is regular.
+            await new Promise(resolve => {
+                this.trigger_up('action_demand', {
+                    actionName: 'toggle_page_option',
+                    params: [{name: 'header_overlay', value: false}],
+                    onSuccess: () => resolve(),
+                });
+            });
+        }
+
+        return _super(...arguments);
+    }
+});
+
 options.registry.HeaderNavbar = options.Class.extend({
     /**
      * Particular case: we want the option to be associated on the header navbar
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index b76108c3d40..108f63eb4b9 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -587,7 +587,7 @@
          data-selector="[data-oe-expression='res_company.partner_id']"
          data-no-check="true"/>
 
-    <div data-js="WebsiteLevelColor"
+    <div data-js="HeaderLayout"
          data-selector="#wrapwrap > header"
          data-no-check="true"
          groups="website.group_website_designer">
@@ -754,7 +754,8 @@
     <div data-js="TopMenuVisibility"
          data-selector="[data-main-object^='website.page('] #wrapwrap > header"
          data-no-check="true">
-        <we-select string="Header Position" id="option_header_visibility" data-no-preview="true">
+        <we-select string="Header Position" data-no-preview="true"
+                   data-dependencies="!header_sidebar_opt">
             <we-button data-visibility="transparent">Over The Content</we-button>
             <we-button data-name="regular_header_visibility_opt"
                        data-visibility="regular">Regular</we-button>