Mobile view not responsive

I’m redesigning my website and my header is not responsive in mobile view. The main menu of my website at the top has a small logo on the left, a menu to the right (Home, Recipes, About Me, Contact), then to the left side is a search bar and some social media stickers.

In mobile view, only the logo and hamburger dropdown menu show up, and the bar is so thick that it takes up half the screen. How can I fix this so that it is thinner, and includes everything from desktop view?

The website is stellanspice.com

Thank you.

The page I need help with: [log in to see the link]