I'd like to add a search bar and drop the menu on Dawn (before and after screen caps)

[Penrose]

Hi. I'd like to make some changes to my header. Here's the current layout for reference. The "Before" if you will.

I'd like to add a search bar where the current menu is. Then move the menu down to a maroon bar below the search. Here's a mock up. The "After".

I'm clueless about how to code. I suppose we could get rid of the magnifying glass icon too.

I'm new to shopify. I'm a graphic designer so I know what I want and how to mock it up, but clueless about how to code it. Any help is apprecaited.

[Penrose]

Help away!

[Made4uo-Ribe]

Hi @Penrose 

We can move the menu below as requested, but adding or showing the search bar may require some custom code changes. Also, the search bar is only visible on the dekstop not in mobile screen. This is where you need a developer. If you'd like, our team can assist with this. Let us know if you'd like to proceed, and we'd be happy to help!

[Penrose]

I'm interested in talking with someone sure.

[Made4uo-Ribe]

I drop a message, for the nav. check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
@media only screen and (min-width: 989px){
.header--middle-left {
    display: grid;
    grid-template-areas:
        "e f"
        "g g";
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr 1fr;
    column-gap: 0 !important;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

nav.header__inline-menu {
    justify-self: center;
}
nav.header__inline-menu {
    background:#8f2b2d;
    color: white;
}
ul.list-menu.list-menu--inline, nav.header__inline-menu {
    width: 100%;
}

ul#meteor-desktop-nav {
    justify-content: center !important;
}

header.header.header--middle-left.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-account {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
h1.header__heading {
    padding-left: 5rem;
}
.header__icons {
    padding-right: 5rem;
}
}
</style>

And Save. 

Result:

Note: I try to change the text color, it's overide code so it will be difficult to add new code. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Penrose]

Thank you so much!

Here's the result it gives me though: