@arminunruh Thanks for your tipp! Point1 works now, Thanks!
Point two (overlay div) is driving me crazy. I've been trying to do this in Javascript, because it didn't work properly by placing the div in the Laytheme Gridder. I tried in so many ways to set the z-index of the filter buttons higher than the overlay div, but it didn't work. The issue is, that the overlay div is covering all the filter menu buttons, so they are not clickable anymore. (in mobile view). What am I missing?
Here the current website (please visit the mobile version)
Here's my css:
.bottom-menu {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
transform: translateY(100%); /* <- Menu is outside the screen */
transition: transform 0.25s ease;
z-index: 9998 !important;
background: none; /* or your desired background */
pointer-events: none; /* so it can't be clicked when closed */
}
.bottom-menu.open {
transform: translateY(0); /* <- Menu slides in */
pointer-events: auto;
}
.menu-toggle-btn {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
background: #00ff00;
color: white;
border: none;
border-radius: 50%;
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9999 !important;
transition: background 0.1s ease;
}
.menu-toggle-btn:hover {
background: #00ff00;
}
.mobile-toggle-wrapper {
z-index: 9999 !important; /* brings green filter mobile button to the front */
}
.laybutton2 {
display: block !important;
margin: 6px auto !important;
width: fit-content !important;
}
/*
* Invisible overlay that covers the entire page,
* to catch clicks outside the menu
* as long as the filter menu is open.
*/
.menu-overlay {
position: fixed; /* Fixes the overlay relative to the viewport (remains visible while scrolling) */
top: 0; /* Starts at the very top */
left: 0; /* and far left */
width: 100vw; /* Takes up the entire width of the viewport */
height: 100vh; /* and the entire height */
background: rgba(255, 0, 0, 0.2); /* Invisible background – you can use something like rgba(0,0,0,0.2) for a slight shadow */
z-index: 9000 !important; /* Lies below the menu (which has z-index: 9999), but above images and other content */
display: none; /* Hidden by default */
pointer-events: auto; /* important: clicks should be recognized */
}
/*
* When the menu is open, the overlay gets the class 'active'.
* This makes it visible and starts catching clicks.
*/
.menu-overlay.active {
display: block; /* Shows the overlay */
}
here's my javascript:
<!-- Mobile Filter Menu Logic -->
<script>
window.laytheme.on("newpageshown", function() {
// 1. Insert the overlay only once, if it doesn’t already exist
if (!document.querySelector('.menu-overlay')) {
const menuOverlay = document.createElement('div'); // Create a new <div>
menuOverlay.className = 'menu-overlay'; // Assign the CSS class
document.body.insertBefore(menuOverlay, document.body.firstChild); // Insert it at the top of the body
}
// 2. Store element references
const menuButton = document.getElementById('toggleButton'); // The green toggle button
const menu = document.getElementById('phoneMenu'); // The mobile filter menu
const overlay = document.querySelector('.menu-overlay'); // The transparent overlay
// 3. Abort if something is missing (e.g. on a page without the menu)
if (!menuButton || !menu || !overlay) return;
// 4. Select all links inside the menu
const links = menu.querySelectorAll('a');
// 5. Function to close the menu
function closeMenu() {
menu.classList.remove('open'); // Remove "open" class
menuButton.style.display = 'flex'; // Show the toggle button again
overlay.classList.remove('active'); // Hide the overlay
document.body.classList.remove('no-scroll'); // Allow scrolling again
}
// 6. Function to open the menu
function openMenu() {
menu.classList.add('open'); // Add "open" class
menuButton.style.display = 'none'; // Hide the toggle button
overlay.classList.add('active'); // Show the overlay
document.body.classList.add('no-scroll'); // Block scrolling
}
// 7. Only add click listener to toggle button once
if (!menuButton.dataset.listenerAttached) {
menuButton.addEventListener('click', (e) => {
e.stopPropagation(); // Don’t propagate click (e.g. to the overlay)
if (menu.classList.contains('open')) {
closeMenu();
} else {
openMenu();
}
});
menuButton.dataset.listenerAttached = "true"; // Set a flag
}
// 8. Every link in the menu closes the menu when clicked
links.forEach(link => {
link.addEventListener('click', () => {
setTimeout(() => {
closeMenu();
}, 300); // Wait 300ms so the link still works
});
});
// 9. Clicking the overlay also closes the menu
overlay.addEventListener('click', () => {
closeMenu();
});
// 10. Clicking outside the buttons (in the wrapper) also closes the menu
const filterWrapper = document.querySelector('.lay-textformat-parent');
if (filterWrapper) {
filterWrapper.addEventListener('click', (event) => {
// Only if a link wasn’t clicked directly
if (!event.target.closest('a')) {
closeMenu();
}
});
}
});
</script>
