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!

[Arif_Shopidevs]

In dawn theme  sections/header.liquid line 163 we can cut the menu and put in  line 275 then the menu will show like your

also in that line if you insert search code it will show like this.
Let me us inform are are able to solve

thank you

[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: