Divi Header Style #12 with hamburger menu

I am referring to the Cart icon and search bar. (Please see the attached image)




The cart icon is only visible when there is at least one product in the cart.

Now I can see cart icon and search bar in the frontend but they are not in the same level and in mobile view the search bar goes on top of the logo.

 

Thanks for the help! I almost got it.

Only in mobile view the search bar is not aligned to the center:



Do you know how I could center align the search bar in mobile?

 

Hello,

I would like to move the search bar from the header to below the header. It did it from visual editor by adding a new row below the header:



But in the actual frontend the header looks strange:



Do you know how I could fix this and add the search bar below the header?

 

Thanks!

Is it possible to have the search bar to be part of the fixed header?

So that the search bar would always be visible when scrolling down the page.

 

Thanks!

I also added free-sticky-no-shadow CSS Class because the search bar had shadow. So the CSS class for the search bar module is now: free-sticky free-sticky-no-shadow

I noticed that now the search bar doesn't show up on mobile when using the sticky CSS class. Is there a way for the search bar to be sticky but still show up on mobile also?