Search Block Functionality on Responsive Mobile/Tablet

Hi,

I am building a site using 2024 theme and core blocks and some third party blocks. My Header design is Site Logo on the left, Navigation Menu and Search bar on the right. I have decided to only keep the Search icon (magnifying glass) on Mobile/Tablet view. But on Mobile/Tablet view, when I click on the Search button, the text box slides left, pushing the hamburger menu and both of these drop down below the site logo. From all the option for the Search block, it seems there is no way to either make the text box drop down below the magnifying glass icon (like in many Classic themes) or to put an overlay on the Hamburger icon without pushing it or open an overlay screen like the Navigation Menu does when we click on the Hamburger icon. I can put the Search Block inside the Navigation Block so it open in an overlay but I want the Search Block outside the Navigation block so users know there is a Search button.

How do I go about achieving this cos the current design breaks the UI/UX.

I am doing this on Local WP, so can’t share the site link.

Thanks.