Drawer menu close button not working

[corenhance]

Hi there,

The drawer menu of my header cannot be closed by clicking the close button. Can anyone please look into this problem and help me.

Thank You.

Website: www.corenhance.store

Password: cn

[rajweb]

Hey @corenhance ,

It looks like you’re using two SVG icons for the drawer menu (a hamburger menu and a close icon), but the functionality to toggle the drawer isn’t working as expected. Here are a few things you can check or try to fix the issue:

1. Ensure JavaScript for Toggle is Set Up: Make sure that the JavaScript function to open and close the drawer is correctly set up. The aria-expanded attribute should toggle between true and false, and the aria-controls should refer to the menu element you want to open/close.

Example Javascript:

const menuButton = document.querySelector('.header__icon--menu');
const drawer = document.getElementById('menu-drawer');

menuButton.addEventListener('click', () => {
    const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
    menuButton.setAttribute('aria-expanded', !isExpanded);
    drawer.classList.toggle('is-open'); // You might have a CSS class to show the menu
});

2. Add Toggle for Close Button: Ensure that your close button has a similar toggle functionality to close the menu when clicked.

Example:

const closeButton = document.querySelector('.icon-close');

closeButton.addEventListener('click', () => {
    menuButton.setAttribute('aria-expanded', 'false');
    drawer.classList.remove('is-open');
});

3. CSS for Drawer Visibility: Double-check if you have the correct CSS that shows/hides the drawer. The drawer might not be properly toggling between the hidden and visible states. Example:

#menu-drawer {
    display: none;
}

#menu-drawer.is-open {
    display: block;
}

4. Make Sure the Close Button is Inside the Drawer: Sometimes, the issue might be that the close button is outside the scope of the drawer element, or it’s not styled as expected. Ensure the close button is inside the drawer so it can close the menu when clicked.

5. Check for JavaScript Errors: Open your browser’s Developer Tools (F12) and check the “Console” tab for any JavaScript errors that might be causing the functionality to break.

Once you apply these changes, the close button should work to toggle the drawer menu.

Let me know if you run into any issues!

Please feel free to reach out to me—I would be happy to help you with the exact solution for your theme. With my 8 years of experience in theme customization and adjustments, I can assist you in fixing the issue with the close button and any other related concerns.

Looking forward to hearing from you soon!

Best regards,

Rajat

[corenhance]

Hi @rajweb

Thank you.

Sorry for asking, but I am not familiar with these terms and don’t know in which file to check. Can you please provide a detailed explanation on what to do.

I have already gone through assets/component-menu-drawer.css and header-drawer.liquid but didn’t find anything.

Thank You.

[rajweb]

@corenhance

No need to apologize—I’m here to help! Since you’re not familiar with the technical terms, Please feel free to send me a message via email so I can assist you with exactly what you need. I’d be happy to help fix the issue with the close button and provide the best solution tailored to your theme.

Looking forward to hearing from you!

[corenhance]

Hi @rajweb

I found the problem. The problem was with the global.js file in which I recently added a code to make the faqs page’s collapsible content opens one at a time. I removed that code and the problem is solved.

Thank You for your help and assistance.

[rajweb]

@corenhance ,

I’m glad you found and fixed the issue! Please like my replies—it really helps my profile. If you ever need assistance in the future, feel free to reach out anytime.

Thank you!