Search Won't Close On Mobile

Search Won't Close On Mobile

minoritywetrust
Excursionist
18 0 6

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

 

 

 

Replies 7 (7)

ThePrimeWeb
Shopify Partner
2139 616 520

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>

  

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
minoritywetrust
Excursionist
18 0 6

Tried this still not closing search on mobile. Everything else is still working. 

ThePrimeWeb
Shopify Partner
2139 616 520

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>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
minoritywetrust
Excursionist
18 0 6

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. 

 

minoritywetrust
Excursionist
18 0 6

Screenshot 2024-03-20 at 1.01.52 AM.pngScreenshot 2024-03-20 at 1.01.25 AM.pngScreenshot 2024-03-20 at 1.00.37 AM.png

minoritywetrust
Excursionist
18 0 6

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>

ThePrimeWeb
Shopify Partner
2139 616 520

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?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!