Shopify themes, liquid, logos, and UX
At first menu bar was not loading and search was not closing mobile and desktop. Then I entered this code:
<style>
.js details[open]>.menu-drawer, .js details[open]>.menu-drawer__submenu{
transform:none;
visibility: visible;
}
</style>
<script>
window.addEventListener('DOMContentLoaded',(event)=>{
document.querySelector('button.search-modal__close-button.modal__close-button.link.link--text.focus-inset').onclick=(e)=>{
e.target.closest('details').removeAttribute('open')
}
});
</script>
into theme.liquid
and the menu bar started working on mobile and desktop, but the search bar only worked on desktop. Still can't get it to close out in mobile. Please help.
First Solution From: https://community.shopify.com/c/technical-q-a/menu-won-t-open-and-search-won-t-close-on-mobile/td-p/...
Dawn Theme
site: theminoritynyc.com
Replace it with this @minoritywetrust
<style>
.js details[open]>.menu-drawer, .js details[open]>.menu-drawer__submenu{
transform:none;
visibility: visible;
}
</style>
<script>
let searchClose = document.querySelectorAll('button.search-modal__close-
button.modal__close-button.link.link--text.focus-inset');
searchClose.forEach(singleClose=> {
singleClose.addEventListener('click', function(e) {
e.target.closest('details').removeAttribute('open');
});
});
</script>
Tried this still not closing search on mobile. Everything else is still working.
I don't see the script in your website, can you paste it and leave it there, if you remove it I cannot test it.
Paste the code below, it's a little edited.
<style>
.js details[open]>.menu-drawer, .js details[open]>.menu-drawer__submenu{
transform:none;
visibility: visible;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
let searchClose = document.querySelectorAll('button.search-modal__close-button.modal__close-button.link.link--text.focus-inset');
searchClose.forEach(singleClose=> {
singleClose.addEventListener('click', function(e) {
e.target.closest('details').removeAttribute('open');
});
});
});
</script>
I copied that code above and now my drop down menu is changed completely, and its not working the same on mobile or desktop. The search bar opens but the closing "X" is off centered.
I want my drop down menu to look the way its suppose to and for the search to work again.
Using this code I was able to revert my menu back to normal. Working on desktop for both search and drop down menu. Mobile menu is working but search bar still wont close on mobile.
<script>
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
if (Shopify.designMode) {
document.documentElement.classList.add('shopify-design-mode');
}
</script>
{% render 'gp-head' %}
<style>
.js details[open]>.menu-drawer, .js details[open]>.menu-drawer__submenu{
transform:none;
visibility: visible;
}
</style>
<script>
window.addEventListener('DOMContentLoaded',(event)=>{
document.querySelector('button.search-modal__close-button.modal__close-button.link.link--text.focus-inset').onclick=(e)=>{
e.target.closest('details').removeAttribute('open')
}
});
</script>
Hey @minoritywetrust,
I don't see a reason why that code would change the layout, it's just a script for functionality, it has nothing written there to change the look of the store.
Can you share a screenshot of how you pasted the code?
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025