IMPLEMENTED: Search Element Overlay slides up with the header on mobile

Feature Requests / Improvements
4

I’ve solved the issue by adding this code:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const style = document.createElement('style');
    style.innerHTML = `
        .no-scroll-search-overlay {
            overflow: hidden;
            position: fixed;
            width: 100%;
        }
    `;
    document.head.appendChild(style);

    const searchOverlay = document.querySelector('.bricks-search-overlay');
    const body = document.body;

    if (!searchOverlay) return;

    const toggleNoScroll = () => {
        if (searchOverlay.classList.contains('show')) {
            body.classList.add('no-scroll-search-overlay');
        } else {
            body.classList.remove('no-scroll-search-overlay');
        }
    };

    // Monitor changes in the class of searchOverlay
    const observer = new MutationObserver(() => {
        toggleNoScroll();
    });

    observer.observe(searchOverlay, { attributes: true, attributeFilter: ['class'] });

    // Initial check in case the overlay is already shown
    toggleNoScroll();
});
</script>

This adds a class on body that prevents scrolling while the “search overlay” has “.show” class.