Solved

Hamburger Menu on mobile isn't working, please help!

ferussports
Tourist
5 2 0

Hi Shopify experts,

 

I need help with my mobile hamburger menu as it doesn't work when I tap on it using mobile devices. It works when I use "Inspect" on desktop but doesn't work on mobile devices.

 

My website is: https://ferussports.com/

 

Please kindly advise how do I fix this issue? 

Accepted Solutions (3)
ferussports
Tourist
5 2 0

This is an accepted solution.

Hi Terence,

 

Thanks for helping me out on this. I tried the suggested solution but it didn't work. 

 

Mobile menu still isn't working on mobile devices.

View solution in original post

TerenceKEANE
Shopify Partner
395 74 67

This is an accepted solution.

Perhaps you may be doing something wrong. Can you send a screenshot of exactly where you added the code? It should be between the <head> tags. Also, when you add it here, try clearing the cache and testing in a private window. Alternatively, you can try clearing the full browser history.

Could you try the following one by one using the same methods above to see if they will work?

 

<script>

if (/Mobi|Android/i.test(navigator.userAgent)) {
    document.querySelector('.mobile-nav-bar').addEventListener('click', function() {
      var sidebar = document.querySelector('#sidebar-mobile-nav');
      sidebar.classList.toggle('show');
    });
}
    </script>

 

<script>

if (window.innerWidth <= 768) {
  setTimeout(function() {
    document.querySelector('.mobile-nav-bar').addEventListener('click', function() {
      var sidebar = document.querySelector('#sidebar-mobile-nav');
      sidebar.classList.toggle('show');
    });
  }, 300);
}

    </script>
★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

ferussports
Tourist
5 2 0

This is an accepted solution.

Hi Terence, 

 

I have been pasting them in theme.liquid under Layout and within <head></head>.

 

I have cleared my cache and browser history on my phone but all the codes provided haven't been successful.

 

Have I pasted it in the wrong place?

View solution in original post

Replies 7 (7)
ferussports
Tourist
5 2 0
Hello there,

Thanks for your response!

Theme: BT Vodoma Swimwear

Yes, its happening on bothe: iOS and Android devices

TerenceKEANE
Shopify Partner
395 74 67

Hello!

 

It seems like you might have made some changes to certain codes in the theme without knowing, or perhaps installing an app caused this issue. Anyway, if you install the following code, the problem should be resolved. At least it works for me. If you can't do it, let me know, and we'll find other ways to solve the issue. Also, you can check how to install the codes from the video below.

 

https://www.convertout.com/blog/how-to-add-javascript-to-an-individual-shopify-page-step-by-step

 

<script>
    document.querySelector('.mobile-nav-bar').addEventListener('click', function() {
  var sidebar = document.querySelector('#sidebar-mobile-nav');
  sidebar.classList.toggle('show');
});

</script>

 

 

 

Terence...

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
ferussports
Tourist
5 2 0

This is an accepted solution.

Hi Terence,

 

Thanks for helping me out on this. I tried the suggested solution but it didn't work. 

 

Mobile menu still isn't working on mobile devices.

TerenceKEANE
Shopify Partner
395 74 67

This is an accepted solution.

Perhaps you may be doing something wrong. Can you send a screenshot of exactly where you added the code? It should be between the <head> tags. Also, when you add it here, try clearing the cache and testing in a private window. Alternatively, you can try clearing the full browser history.

Could you try the following one by one using the same methods above to see if they will work?

 

<script>

if (/Mobi|Android/i.test(navigator.userAgent)) {
    document.querySelector('.mobile-nav-bar').addEventListener('click', function() {
      var sidebar = document.querySelector('#sidebar-mobile-nav');
      sidebar.classList.toggle('show');
    });
}
    </script>

 

<script>

if (window.innerWidth <= 768) {
  setTimeout(function() {
    document.querySelector('.mobile-nav-bar').addEventListener('click', function() {
      var sidebar = document.querySelector('#sidebar-mobile-nav');
      sidebar.classList.toggle('show');
    });
  }, 300);
}

    </script>
★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
ferussports
Tourist
5 2 0

This is an accepted solution.

Hi Terence, 

 

I have been pasting them in theme.liquid under Layout and within <head></head>.

 

I have cleared my cache and browser history on my phone but all the codes provided haven't been successful.

 

Have I pasted it in the wrong place?

TerenceKEANE
Shopify Partner
395 74 67

Hello again! Could you please write the code right above the </head> section? Also, could you send me a screenshot of the exact place where you pasted the full code? It seems to be resolved now, right?

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
ferussports
Tourist
5 2 0

Hi Terence,

 

I pasted the codes you shared with me individually right above the </head>  section but none of them worked. Did I paste it in the right section/code? 

 

Please see below a screenshot. Screenshot 2024-02-25 at 1.40.43 pm.png