Solved Mobile menu search bar fullwidth

Hello,

When including the search function in the menu module, when clicking the search icon the menu links fade out in place of a search bar so that you can type in a search. This looks fine on desktop, but on mobile size the column width of the search bar is so small to the point where it can be difficult for the user to see what they are typing the search bar.

I was wondering, is there a way to make the search bar full width on click? So, not only will the hamburger menu and search icon fade out, but also the site logo. Then the search bar will be wide enough to where the user can see what they're typing.

 

I was able to get this resolved by writing some simple jQuery click functions to hide and show the site logo.