Jump to content

Hide mobile menu on search icon click

Recommended Posts

Hey Everyone,

I'm trying to hide the expanded mobile menu when someone clicks on my search icon. I've been able to do it successfully by using this on click of the search icon.

$('body').removeClass('header--menu-open');
$('.header-burger-btn').removeClass('burger--active');

This hides the expanded menu and changes the "X" back to the hamburger icon. However, when I close my search bar, I have to click on the menu icon twice for it to open again. I noticed it has something to do with the "hidden" attribute on these items.

<span class="js-header-burger-open-title visually-hidden">Open Menu</span>
<span class="js-header-burger-close-title visually-hidden" hidden="">Close Menu</span>

I've tried toggling the attributes through .removeAttr() and .attr() but for some reason I'm not able to add the hidden attribute back.

I appreciate any help on this. I'm only having this issue with the mobile menu.

Thanks!

Link to comment
On 2/25/2023 at 9:08 PM, tuanphan said:

Hi,

It looks like you solved this?

 

Hey @tuanphan! Sorry I just saw this come through. I haven't solved it yet. Here are the steps to reproduce:

Tap menu icon > tap search icon > tap "X" in search bar

When you try to tap the menu icon to reopen the navigation it does nothing, then if you tap it a second time, the menu will open like expected.

Edited by TheSpaltyDog
Link to comment
  • 2 weeks later...
On 3/17/2023 at 11:08 AM, TheSpaltyDog said:

Hey @tuanphan, do you have any thoughts on how to remedy this?

Thanks!

Hi,

I can't find how to fix. You can consider disable search icon on mobile only. If you need this, we can give CSS code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.