[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

closes odoo/odoo#58528

X-original-commit: 6e1c2ad5db69fe7eaa8f53c8da8375435b59f486
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Benjamin Vray
2020-09-25 13:12:02 +00:00
committed by qsm-odoo
parent c694d64e66
commit e7ee28cb67
3 changed files with 9 additions and 12 deletions
@@ -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
+8 -4
View File
@@ -868,9 +868,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;
@@ -955,9 +959,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 {
+1 -1
View File
@@ -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>