diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index e04949fb3cf..400c3ebc400 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1201,6 +1201,7 @@ header {
         padding-right: $grid-gutter-width / 2;
     }
 }
+
 .o_mega_menu_container_size {
     $-header-template: o-website-value('header-template');
     @if not index(('sidebar', 'hamburger', 'magazine'), $-header-template) {
@@ -1220,6 +1221,26 @@ header {
     @include make-container-max-widths($-mm-max-widths);
 }
 
+// The design of some of the new mega menu templates required a column with
+// an overlay that would overflow until the end of the container. For
+// technical reasons, this overlay has to be hardcoded here.
+%s_mega_menu_gray_area {
+    z-index: 1;
+
+    &:before {
+        content: '';
+        display: block;
+        width: 100vw;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: -1;
+        pointer-events: none;
+        background: rgba(0, 0, 0, .05);
+    }
+}
+
 #wrapwrap.o_header_overlay {
     > header:not(.o_header_affixed):not(.o_top_menu_collapse_shown) {
         @include o-position-absolute(0, 0, auto, 0);
diff --git a/addons/website/static/src/snippets/s_mega_menu_little_icons/000.scss b/addons/website/static/src/snippets/s_mega_menu_little_icons/000.scss
index 612fb0ef77e..c676723cb2c 100644
--- a/addons/website/static/src/snippets/s_mega_menu_little_icons/000.scss
+++ b/addons/website/static/src/snippets/s_mega_menu_little_icons/000.scss
@@ -7,20 +7,6 @@
     }
 
     .s_mega_menu_gray_area:last-child {
-        // Allow to show the grey background used in the pseudo-element
-        z-index: 1;
-
-        &:before {
-            content: '';
-            display: block;
-            width: 100vw;
-            height: 100%;
-            position: absolute;
-            left: 0;
-            top: 0;
-            z-index: -1;
-            pointer-events: none;
-            background: rgba(0, 0, 0, .05);
-        }
+        @extend %s_mega_menu_gray_area;
     }
 }
diff --git a/addons/website/static/src/snippets/s_mega_menu_menus_logos/000.scss b/addons/website/static/src/snippets/s_mega_menu_menus_logos/000.scss
index 290a17b4221..04be8c258ee 100644
--- a/addons/website/static/src/snippets/s_mega_menu_menus_logos/000.scss
+++ b/addons/website/static/src/snippets/s_mega_menu_menus_logos/000.scss
@@ -1,21 +1,7 @@
 
 .s_mega_menu_menus_logos:not([data-vcss]) {
     .s_mega_menu_gray_area:last-child {
-        // Allow to show the grey background used in the pseudo-element
-        z-index: 1;
-
-        &:before {
-            content: '';
-            display: block;
-            width: 100vw;
-            height: 100%;
-            position: absolute;
-            left: 0;
-            top: 0;
-            z-index: -1;
-            pointer-events: none;
-            background: rgba(0, 0, 0, .05);
-        }
+        @extend %s_mega_menu_gray_area;
     }
 
     .s_mega_menu_menus_logos_wrapper {
diff --git a/addons/website/static/src/snippets/s_mega_menu_odoo_menu/000.scss b/addons/website/static/src/snippets/s_mega_menu_odoo_menu/000.scss
index c1e66b14140..8b3f9a45df4 100644
--- a/addons/website/static/src/snippets/s_mega_menu_odoo_menu/000.scss
+++ b/addons/website/static/src/snippets/s_mega_menu_odoo_menu/000.scss
@@ -2,7 +2,18 @@
 .s_mega_menu_odoo_menu:not([data-vcss]) {
     .s_mega_menu_odoo_menu_footer {
         // Apply color transparency to match with the preset used
-        border-color: rgba(0, 0, 0, .05) !important;
-        background: rgba(0, 0, 0, .05) !important;
+        border-color: rgba(0, 0, 0, .05);
+
+        .row > div:not(.o_cc) {
+            // TODO this should be replaced by proper structure and color
+            // classes
+            @extend %s_mega_menu_gray_area;
+
+            &::before {
+                @include o-position-absolute(0, 0, 0, 0);
+                width: auto;
+                height: auto;
+            }
+        }
     }
 }
diff --git a/addons/website/static/src/snippets/s_mega_menu_thumbnails/000.scss b/addons/website/static/src/snippets/s_mega_menu_thumbnails/000.scss
index 23861564cc6..232e3591d0e 100644
--- a/addons/website/static/src/snippets/s_mega_menu_thumbnails/000.scss
+++ b/addons/website/static/src/snippets/s_mega_menu_thumbnails/000.scss
@@ -1,5 +1,13 @@
 .s_mega_menu_thumbnails:not([data-vcss]) {
-    .s_mega_menu_thumbnails_footer {
-        background: rgba(0, 0, 0, .05);
+    .s_mega_menu_thumbnails_footer:not(.o_cc) {
+        // TODO this should be replaced by proper structure and color
+        // classes
+        @extend %s_mega_menu_gray_area;
+
+        &::before {
+            @include o-position-absolute(0, 0, 0, 0);
+            width: auto;
+            height: auto;
+        }
     }
 }
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index d4c142fe036..f7b8738bd2d 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -463,8 +463,8 @@
     </div>
 
     <!-- Background -->
-    <t t-set="only_bg_color_selector" t-value="'section .row > div, .s_text_highlight'"/>
-    <t t-set="only_bg_color_exclude" t-value="'.s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .o_mega_menu .row > div, .s_image_gallery .row > div'"/>
+    <t t-set="only_bg_color_selector" t-value="'section .row > div, .s_text_highlight, .s_mega_menu_thumbnails_footer'"/>
+    <t t-set="only_bg_color_exclude" t-value="'.s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .s_image_gallery .row > div'"/>
 
     <t t-set="base_only_bg_image_selector" t-value="'.s_tabs .oe_structure > *, footer .oe_structure > *'"/>
     <t t-set="only_bg_image_selector" t-value="base_only_bg_image_selector"/>