Overlay menu built via custom Liquid/JS in the Shopify Refresh theme (v15.1.0) only toggles on one viewport at a time—currently works on desktop; the mobile menu button does nothing.
Proposed approach:
Use media queries to keep the overlay hidden by default and a shared .menu-open class to display it on both breakpoints.
Attach JS click listeners to desktop and mobile buttons (or a single shared button) that toggle the overlay’s class.
Diagnosis update:
A console screenshot indicates JavaScript breaks because jQuery is not loaded, suggesting a dependency issue rather than solely CSS/JS logic. jQuery is a JavaScript library; if your code relies on it, it must be included, or rewritten in vanilla JS.
User clarifications:
Asked where to place the JS and what “Verify with Refresh Theme Customizations” means. Shared their custom CSS and Liquid; the CSS media queries shown lack a selector inside, which likely prevents intended hiding/showing.
Artifacts central to understanding:
Console error screenshots and code snippets are key.
Status:
Unresolved. Next steps: ensure jQuery is loaded or remove jQuery dependency, place JS in theme’s appropriate file/section, fix CSS selectors, and verify consistent class names across mobile/desktop.
Summarized with AI on December 17.
AI used: gpt-5.
I am trying to get an overlay menu effect on my site using JS, but it only works on either the mobile or desktop. Never on both simultanously. I am editing the code in the custom liquid spaces.
I have tried to strip down the code to ONLY the code for the menu, to make it simple but no success. I have tried to give the menu different names for mobile and desktop, to minimize the risk for conflict but that doesnt seem to matter at all, still only works on one or the other, not both.
Right now it works on the desktop view, while the menu-button on the mobile-view render nothing.
here’s how you can handle your overlay menu to ensure it works both on desktop and mobile views.
Ensure Correct CSS with Media Queries:
/* Desktop-specific styles */
@media (min-width: 750px) {
.overlay-menu {
display: none; /* Start with hidden */
}
.menu-open {
display: block; /* Show the overlay when menu is open */
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
}
}
/* Mobile-specific styles */
@media (max-width: 749px) {
.overlay-menu {
display: none; /* Start hidden on mobile */
}
.menu-open {
display: block; /* Show menu when open on mobile */
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
}
}
JavaScript to Handle Both Views:
document.addEventListener("DOMContentLoaded", function () {
const menuButtonDesktop = document.querySelector('.menu-button-desktop');
const menuButtonMobile = document.querySelector('.menu-button-mobile');
const overlayMenu = document.querySelector('.overlay-menu');
function toggleMenu() {
overlayMenu.classList.toggle('menu-open');
}
// Desktop menu button listener
if (menuButtonDesktop) {
menuButtonDesktop.addEventListener('click', function () {
toggleMenu();
});
}
// Mobile menu button listener
if (menuButtonMobile) {
menuButtonMobile.addEventListener('click', function () {
toggleMenu();
});
}
});
Verify with Refresh Theme Customizations:
document.addEventListener("DOMContentLoaded", function () {
const menuButton = document.querySelector('.menu-button'); // Single button for both
const overlayMenu = document.querySelector('.overlay-menu');
function toggleMenu() {
overlayMenu.classList.toggle('menu-open');
}
// Event listener for both mobile and desktop menus
if (menuButton) {
menuButton.addEventListener('click', function () {
toggleMenu();
});
}
});
I have checked the theme console, and noticed that the JavaScript display the menu for both desktop and mobile is breaking due to the jQuery script not being loaded. You can see the console error in the screenshot below.
Okay so if i understand it right, its some kind of conflict with the javascript? That is the feeling ive been having but i dont really know if it is a development-bug or just me who isnt applying the scripts correctly?
