Skip to content
Permalink
Browse files

[IMP] website: made 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
scrollabe, enabling user to navigate through all the available
menus.

task-1938637
  • Loading branch information...
dja-odoo committed Apr 11, 2019
1 parent defbb16 commit ffc0cff48b64f9bd7123356736b72b066ffd8638
Showing with 12 additions and 0 deletions.
  1. +6 −0 addons/website/static/src/js/content/menu.js
  2. +6 −0 addons/website/static/src/scss/website.scss
@@ -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));
@@ -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
}

0 comments on commit ffc0cff

Please sign in to comment.
You can’t perform that action at this time.