How to turn off this search element focus in mobile menu

[vks_group]

In the mobile menu, when clicking the hamburger icon, the menu currently appears with the search element in focus, as shown in the second image. I would like to disable this autofocus so that, when the hamburger icon is clicked, the menu appears as it does in the third image. How can I achieve this?

[tristup]

Hi Ketan,

Thanks for reaching out.
It seems you are facing a similar problem to the one described in the following thread. I would suggest you check those.

Mobile: Search bar in mega menu is active/selected when opened

Thanks Tristup! I really wanted this design so I found my solution using javascript. Search model → #nofocussearch Mega menu → #MegaMenuMobile As long as you use the ID’s for the elements, this code should work. (Edit 05-06-2021: I updated the script) //This prevents the keyboard from popping up when you open the Mega Menu Mobile. When the menu is opened this script // quickly disables the field and then enables is. document.getElementById("MegaMenuMobile-anchor-toggle").addEventListener("…

How to stop autofocus on the search bar within mobile menu upon open

Hey guys, This is continuing on from our support ticket. But for recap, on our website when in mobile/responsive mode, the toggleable canvas - megamenu has a search bar in it. And when you open said menu in mobile it autofocuses on the search bar, causing the mobile keyboard to popup. (Website we spoke about is in the private message attached, but this is continuing from our previous communications) Now I know that I could just obfuscate it behind a button click to open the menu, but the inte…

Hope it helps.
Thanks

[vks_group]

Hey, the above threads which you shared are not working in my case. Let me explain my issue one more time.
I want to disable the autofocus for search bar in mobile menu. so that whenever user clicks on hamburger menu the side menu should open normally so that the side menu should not zoom out. This zoom out issue is specifically on the apple phone such as iPhone 13.

I just want it not to zoom out on any mobile device. please help me in solving this. let me know if you need more clarification.

[sparko]

Hey @vks_group,

Safari typically zooms in when font sizes of input fields are below 16px. Easiest way to avoid this would be to increase the input fields font size to at least 16px.

Defensive CSS - Input zoom on iOS Safari

[vks_group]

Thank you!
this solution worked for me

[tristup]

Hi Ketan,

Glad to know that the solution worked for you.

Thanks