From c1dbc3f5ab2e8d76b2c9acb272290618effb0030 Mon Sep 17 00:00:00 2001 From: Dharmraj Jhala Date: Thu, 11 Apr 2019 07:05:54 +0000 Subject: [PATCH] [IMP] website: make hamburger menu scrollable in small devices Currently, in small devices, hamburger menu of the cloned navbar is not scrollable due to fixed position. This commit improves the behavior and makes the affixed navbar scrollable, enabling user to navigate through all the available menus. task-1938637 closes odoo/odoo#32359 Signed-off-by: Quentin Smetz (qsm) --- addons/website/static/src/js/content/menu.js | 6 ++++++ addons/website/static/src/scss/website.scss | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js index 913740098b6..3034c2e5e70 100644 --- a/addons/website/static/src/js/content/menu.js +++ b/addons/website/static/src/js/content/menu.js @@ -34,6 +34,12 @@ publicWidget.registry.affixMenu = publicWidget.Widget.extend({ $source.attr('data-target', targetIDSelector + '_clone'); $target.attr('id', targetIDSelector.substr(1) + '_clone'); }); + // While scrolling through navbar menus, body should not be scrolled with it + this.$headerClone.find('div.navbar-collapse').on('show.bs.collapse', function () { + $(document.body).addClass('overflow-hidden'); + }).on('hide.bs.collapse', function () { + $(document.body).removeClass('overflow-hidden'); + }); // Window Handlers $(window).on('resize.affixMenu scroll.affixMenu', _.throttle(this._onWindowUpdate.bind(this), 200)); diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index e384e8df34b..5fb20b332c8 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -1050,6 +1050,12 @@ table.table_desc tr td { background: $light; margin-top: -999px; transition: margin-top 500ms ease 0s; + @include media-breakpoint-down(sm) { + .navbar-collapse { + max-height: 70vh; + overflow-y: auto; + } + } &.affixed { margin-top: 0px !important; // the default margin-top is adapted in JS }