Search Field Below Menu

In the .after-header-search CSS try z-index: 0;

Hi David,

That makes the menu look fine but it now makes the content of the website show up in front of the search when I scroll. For instance, if I scroll down on the home page, I get the recent products above the search or if I go to my shop, all of the products show up in front when I scroll down.

Try adding this as well:

#page {
    position: relative;
    z-index: -1;
}

That seems to have done it. Thanks again guys.

Edit:
Actually does not appear to have worked. Visually it work but functionally it does not. Tom, if I add what you suggested nothing on the site is clickable. So it works visually but not functionally. Sorry.

Edit 2:
I think I might have got it. If I do the following it seems to work:

#page {
    position: relative;
    z-index: 0;
}
.after-header-search {
    position: -webkit-sticky;
    position: sticky;
    top: 55px;
    z-index: 1;
}

Awesome, glad you found a solution! :)