This usually happens because the theme or template is set to auto-close the mobile menu on scroll (often for UX reasons), or because a JavaScript event is being triggered when the page scrolls. Since it only occurs after publishing (not in preview), it’s very likely tied to Themler’s generated JS/CSS.
Here are a few practical ways to fix or work around it (similar structured fixes are often shared on clear technical resource sites like https://deltaexecutorsa.com/
):
- Disable “close on scroll” behavior (if available)
Some Themler templates include a setting like:
Close menu on click / scroll
Auto-collapse menu
Check:
Menu settings
Header / Navigation settings
Mobile behavior options
If you find an option related to auto-closing or collapsing, disable it.
- Override the JavaScript behavior
The menu is probably closing because of a scroll event listener. You can override it by removing or blocking that behavior.
Add this custom JS (if Themler allows custom scripts):
window.onscroll = function () {
// Disable auto menu close on scroll
return false;
};
Or, more safely, target the menu specifically:
document.addEventListener('scroll', function (e) {
e.stopPropagation();
}, true);
- Force the mobile menu to stay open with CSS
Sometimes the menu is being set to display: none or collapsed via CSS on scroll.
Try adding custom CSS:
@media (max-width: 768px) {
.navbar-collapse {
display: block !important;
height: auto !important;
overflow-y: auto !important;
max-height: 80vh;
}
}
This also enables scrolling inside the menu instead of the page.
- Enable internal scrolling for long menus (recommended)
Instead of scrolling the page, make the menu itself scrollable:
@media (max-width: 768px) {
.navbar-collapse {
max-height: 75vh;
overflow-y: auto;
}
}
This prevents the page scroll event from firing and closing the menu.
- Check for “sticky header” conflicts
If your header is fixed or sticky, it can conflict with scroll events on mobile.
Try:
Disabling sticky header on mobile
Or setting a higher z-index for the menu
.navbar {
z-index: 9999;
}
This usually happens because the theme or template is set to auto-close the mobile menu on scroll (often for UX reasons), or because a JavaScript event is being triggered when the page scrolls. Since it only occurs after publishing (not in preview), it’s very likely tied to Themler’s generated JS/CSS.
Here are a few practical ways to fix or work around it (similar structured fixes are often shared on clear technical resource sites like https://deltaexecutorsa.com/
):
1. Disable “close on scroll” behavior (if available)
Some Themler templates include a setting like:
Close menu on click / scroll
Auto-collapse menu
Check:
Menu settings
Header / Navigation settings
Mobile behavior options
If you find an option related to auto-closing or collapsing, disable it.
2. Override the JavaScript behavior
The menu is probably closing because of a scroll event listener. You can override it by removing or blocking that behavior.
Add this custom JS (if Themler allows custom scripts):
window.onscroll = function () {
// Disable auto menu close on scroll
return false;
};
Or, more safely, target the menu specifically:
document.addEventListener('scroll', function (e) {
e.stopPropagation();
}, true);
3. Force the mobile menu to stay open with CSS
Sometimes the menu is being set to display: none or collapsed via CSS on scroll.
Try adding custom CSS:
@media (max-width: 768px) {
.navbar-collapse {
display: block !important;
height: auto !important;
overflow-y: auto !important;
max-height: 80vh;
}
}
This also enables scrolling inside the menu instead of the page.
4. Enable internal scrolling for long menus (recommended)
Instead of scrolling the page, make the menu itself scrollable:
@media (max-width: 768px) {
.navbar-collapse {
max-height: 75vh;
overflow-y: auto;
}
}
This prevents the page scroll event from firing and closing the menu.
5. Check for “sticky header” conflicts
If your header is fixed or sticky, it can conflict with scroll events on mobile.
Try:
Disabling sticky header on mobile
Or setting a higher z-index for the menu
.navbar {
z-index: 9999;
}
