[FIX] website: fix off-canvas menu when header is affixed

Before this commit the layout of the off-canvas menu was broken with an
affixed header.

task-2312878

closes odoo/odoo#57442

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

3 files changed, 9 insertions, 12 deletions

diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 8967dc911db..7cb42d99603 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -185,13 +185,6 @@ body.editor_enable.editor_has_snippets {
             }
         }
     }
-    @if o-website-value('hamburger-type') == 'off-canvas' {
-        #top_menu_collapse {
-            &.collapsing, &.show {
-                right: $o-we-sidebar-width;
-            }
-        }
-    }
 }
 
 //s_dynamic_snippet
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 629f2b67573..1d36d5e7819 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -863,9 +863,13 @@ header {
     #top_menu_collapse {
 
         &.collapsing, &.show {
+            // Note: position relatively to the header instead of the viewport
+            // because fixed position cannot work inside an element whose CSS
+            // transform is different to none, which the header element is
+            // because of header effects.
             @include o-position-absolute(0, 0, 0, 0);
-            position: fixed;
             z-index: $zindex-sticky;
+            height: 100vh;
             transition: none;
             transform: none;
 
@@ -950,9 +954,9 @@ header {
                 }
             }
 
-            .o_connected_user:not(.editor_has_snippets) header:not(.o_header_is_scrolled) &,
-            .o_connected_user:not(.editor_has_snippets) header.o_header_affixed & {
-                padding-top: $o-navbar-height !important;
+            .o_connected_user:not(.editor_has_snippets) header & {
+                top: -$o-navbar-height;
+                padding-top: $o-navbar-height;
             }
         }
         &.collapsing #top_menu {
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 3f717fc5d05..fbb5f1ca9ed 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -1226,7 +1226,7 @@
         <div class="o_offcanvas_menu_backdrop" data-toggle="collapse" data-target="#top_menu_collapse" aria-label="Toggle navigation"/>
     </xpath>
     <xpath expr="//ul[@id='top_menu']/t" position="before">
-        <li class="o_offcanvas_menu_toggler order-first navbar-toggler text-right border-0">
+        <li class="o_offcanvas_menu_toggler order-first navbar-toggler text-right border-0 o_not_editable">
             <a href="#top_menu_collapse" class="nav-link px-3" data-toggle="collapse">
                 <span class="fa-2x">&#215;</span>
             </a>