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

ferussports · ‎02-22-2024

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?

ferussports · ‎02-22-2024

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 · ‎02-22-2024

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!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
☕ 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 · ‎02-23-2024

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

ferussports · ‎02-22-2024

Hello there,

Thanks for your response!

Theme: BT Vodoma Swimwear

Yes, its happening on bothe: iOS and Android devices

TerenceKEANE · ‎02-22-2024

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!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
☕ 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 · ‎02-22-2024

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 · ‎02-22-2024

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!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
☕ 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 · ‎02-23-2024

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 · ‎02-24-2024

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!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
☕ 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 · ‎02-24-2024

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.

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

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

Community Blog Articles