Mobile Menu not working in Studio Theme

Shopify Discussion
1

Hi guys I’m Having some issue with my Mobile menu. When I click nothing happens. it works normally on desktop

Can someone help me figure out what is going on ?

My Page : https://kiapani.com

2

Hi,

This is Richard at PageFly - Shopify Advanced Page Builder app.

Let’s troubleshoot why your mobile menu isn’t working. Here’s a systematic approach to identify and fix the issue:

1. Basic Checks:

  • JavaScript Errors:
    • Open your browser’s developer tools (usually by pressing F12 or right-clicking and selecting “Inspect”).
    • Go to the “Console” tab
      • Look for any JavaScript errors. These errors can prevent your menu script from running.
    • CSS Issues:
      • Inspect the menu button and the menu itself using the developer tools’ “Elements” tab.
      • Check if any CSS rules are hiding the menu or preventing it from responding to clicks.
      • Make sure that the menu is not accidently set to display:none;
    • HTML Structure:
      • Verify that your HTML structure is correct. Ensure that the menu button and the menu container are properly linked.
        - - Event Listener:
        - Make sure that your JavaScript code is correctly attaching an event listener to the menu button.
        - Use console.log() statements to check if the event listener is being triggered when you click the button.

3. CSS Troubleshooting:

  • Media Queries:
    • Double-check your CSS media queries to ensure that they’re correctly targeting mobile devices.
    • Make sure that the menu styles are being applied at the correct screen widths.
  • Z-Index:
    • Verify that the menu’s z-index is high enough to appear on top of other elements.
  • Overflow:
    • If the menu’s content is overflowing, it might be hidden. Check the overflow property of the menu container.
  • Visibility/Display:
    • Make sure that the mobile menu is set to display:block or another visible setting, when the menu button is pressed.

4. WordPress Specifics (If Applicable):

  • Plugin Conflicts:
    • If you’re using WordPress, try temporarily disabling your plugins to see if any of them are causing conflicts.
  • Theme Issues:
    • Switch to a default WordPress theme (like Twenty Twenty-Three) to see if the menu works. If it does, the problem is likely with your theme.
  • Caching:
    • Clear your WordPress cache and your browser cache.

Hoping my solution helps you solve your problem.

Best regards,

Richard | PageFly