Hi @petjoy1
I've taken a close look at your concerns regarding the mobile menu's close icon not functioning, the dropdown menu issues, and your product pages not displaying on your Shopify store, petjoyz.com. Let's address each problem step by step.
1. Mobile Menu Close Icon Not Working:
It's frustrating when the close (X) button on the mobile menu doesn't respond. This issue often arises from JavaScript errors or missing elements in your theme's code. Here's a straightforward solution:
- Edit the theme.liquid File:
- In your Shopify admin, navigate to Online Store > Themes.
- Click on Actions > Edit code.
- Open the theme.liquid file located under the Layout directory.
- Scroll to the bottom and locate the closing </body> tag.
Just before the </body> tag, add the following script:
<script>
document.addEventListener('DOMContentLoaded', function () {
const closeButtons = document.querySelectorAll('.halo-sidebar-close');
if (closeButtons.length > 0) {
closeButtons.forEach(button => {
button.addEventListener('click', function () {
if (document.body.classList.contains('menu_open')) {
document.body.classList.remove('menu_open');
console.log('menu_open class removed from body');
}
});
});
}
});
</script>
- This script ensures that when the close button is clicked, the mobile menu closes as intended. community.shopify.com
- Dropdown Menu on Mobile Not Working:
When dropdown menus don't function on mobile devices, it can be due to conflicts in the JavaScript or CSS. Here's how to troubleshoot:
- Check for JavaScript Conflicts:
1-Ensure that jQuery is included in your theme.
In the theme.liquid file, within the <head> section, add:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2-Make sure this script is placed before any other scripts that depend on jQuery.
- Check Custom Scripts: If you've added custom JavaScript for menu interactions, ensure they don't conflict with existing scripts. Sometimes, scripts designed for desktop hover interactions can interfere with mobile tap events.
community.shopify.com
- Product Pages Not Displaying:
It's crucial for your products to be visible to customers. Here's how to ensure they're displayed correctly:
- Verify Product Status and Sales Channels:
- In your Shopify admin, go to Products.
- Select the product that's not displaying.
- On the right side, under Product status, ensure it's set to Active.
- Click on Manage under Sales channels and apps.
- Ensure that Online Store is checked.
- This ensures that your products are available on your online store. community.shopify.com
- Check Collection Conditions: If your products are part of specific collections, ensure that the collection's conditions aren't inadvertently excluding them.
By following these steps, you should be able to resolve the issues with your mobile menu and product displays.
If you need any other assistance, feel free to ask, and I will try my best to support you.
Best regards,
Daisy.
Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!
Avada SEO & Image Optimizer - The #1 SEO solution
