spacing between global search and menu

Question

I'm in the process of creating an application store. The following is the wireframe for it. Now I want to make the search bar globally available regardless of the page the user is. So I made the search component to appear over the listing and gave some spacing to the menu as well. To show the search is in a separate bar.

Is this the best approach to make the search bar globally available? without making it appear on the header it self!

How can I achieve the globally available search bar?

---

Along with the answers I recieved, updated my wireframe to show something as following. Is this approach cleaner? I kept the category selection as it is and changed the location of the search, to be on the top right.

Answer 1

To answer your question: This is not the best approach.

Why? Because it looks like the search bar is limited to the content below it. In this case the wording is off to, if its a global search then it should say "Search site" or "Search NAME OF THE PLATTFORM" for example instead of "Search applications".

The Header would be the best option since its the most clear indicator that the search is global and not limited to its content below.

If the header is not an option then you could place the search like this:

Try to visually separate the search from the content below as good as possible.

Answer 2

Having the search bar in the top header is one of the cleanest and most clear ways of depicting that the search is global in nature.

I generally don't have any issues with your wireframe either. My only concern is whether it utilizes the space optimally.