[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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user