diff --git a/extensions/odoo_theme/static/js/menu.js b/extensions/odoo_theme/static/js/menu.js
index 6e437dd58..2f4d3aef7 100644
--- a/extensions/odoo_theme/static/js/menu.js
+++ b/extensions/odoo_theme/static/js/menu.js
@@ -47,14 +47,21 @@
}
};
+ document.addEventListener('scroll', () => {
+ // Allow to hide the searchbar when the page is scrolled in mobile.
+ _flagHeaderWithScrollPosition();
+ });
+
/**
- * Mobile: Toggle open/close sidebar on click of nav button (&& on swipe left to right?).
- *
- *
- * `o_active_toc_entry` class, and their related (parent) TOC entry list (
elements) receive
- * the `show` (Bootstrap) class.
- * Also, the deepest TOC entry receives the `o_deepest_active_toc_entry` class, and its child
- * Sidebar receives the `o-mobile-show` class.
+ * Add/Remove the class `o_header_scrolled` on the header according to the scroll position.
*/
+ const _flagHeaderWithScrollPosition = () => {
+ const header = document.querySelector('.o_main_header');
+ if (this.scrollY > 0) {
+ header.classList.add('o_header_scrolled');
+ } else {
+ header.classList.remove('o_header_scrolled');
+ }
+ };
})();
diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss
index 5587584ab..12973d20e 100644
--- a/extensions/odoo_theme/static/style.scss
+++ b/extensions/odoo_theme/static/style.scss
@@ -73,15 +73,27 @@ header.o_main_header{
}
.o_search_wrapper {
display: flex;
+ opacity: 1;
+ @include transition(opacity .3s);
+
@include media-breakpoint-down(lg) {
display: block;
position: absolute;
width: 100%;
padding: 0 10px;
- top: calc(100% + 30px);
+ top: calc(100% + 15px);
}
}
+ &.o_header_scrolled {
+ .o_search_wrapper {
+ @include media-breakpoint-down(lg) {
+ opacity: 0;
+ }
+ }
+ }
+
+
.highlight-link {
margin-bottom: 0;
padding: 0 1rem;