[FIX] website: remove the margin above the mega menus

Since the upgrade to Bootstrap 5 and especially since this [BS5 commit],
there is a gap between the mega menu and the navbar when the user opens
a mega menu. This commit removes that gap.

Steps to reproduce the bug fixed by this commit:
- Have a mega menu on your website.
- Drop a block of a dark color at the top of the page (it helps to see
the problem).

=> When you open the mega menu, you can see a small piece of the block
of dark color between the navbar and the mega menu.

Technical explanation:
This [BS5 commit] introduces a new css rule that adds a
`margin-top: 0.125rem;` on the `.dropdown-menu[data-bs-popper]`. However
when [mega menus were introduced], another css rule prevents having a
gap between the nav and the mega menu (`margin-top: 0;` on
`.o_mega_menu`). This commit makes sure that it will be a `margin-top`
of 0 by making the property more important.

[BS5 commit]: https://github.com/odoo/odoo/commit/c48f57ea2538ad51e00ac27d58f8e191781444f3
[mega menus were introduced]: https://github.com/odoo/odoo/commit/1345702258adbfbee0d780dc22e552395e6d1df7

task-3133137
opw-3226013

X-original-commit: b41c76bd7583756ad059f77f0d3c1151720b0b0b
Part-of: odoo/odoo#118842
This commit is contained in:
Guillaume (gdi)
2023-04-20 10:51:46 +02:00
parent ca835299b5
commit 9bd294823c
2 changed files with 6 additions and 1 deletions
+1 -1
View File
@@ -1222,7 +1222,7 @@ header {
.o_mega_menu {
width: 100%;
padding: 0;
margin-top: 0;
margin-top: 0 !important;
border-radius: 0;
background-clip: unset; // Remove the 1px gap introduced by BS4
background-color: transparent; // In order to allow the mega menu to be transparent
@@ -240,6 +240,11 @@ wTourUtils.registerWebsitePreviewTour('edit_menus', {
content: "When the mega menu is opened, scroll up",
trigger: 'iframe #top_menu .o_mega_menu_toggle.show',
run: function () {
const marginTopOfMegaMenu = getComputedStyle(
this.$anchor[0].closest('.dropdown').querySelector('.o_mega_menu'))['margin-top'];
if (marginTopOfMegaMenu !== '0px') {
console.error('The margin-top of the mega menu should be 0px');
}
// Scroll up.
this.$anchor[0].closest('body').querySelector('.s_media_list_item:nth-child(2)')
.scrollIntoView(true);