How can I reposition elements within a webpage header?

[GFAD]

I am trying keep our navigation menu as is, but move the search icon to the far right, y-axis centered, within the banner. I need to put seperate containers, but I'm not sure where the right place to start tweaking the code actually is... I want to do this:

We have this:

Even just a nudge in the right direction would be a big help.

Thanks so much!

[Made4uo-Ribe · Accepted solution]

Thank for the info, im just referring to example picture.

Do you mean like this? 

If it is try this one then. 

• 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 "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
• And Save.

.header>.header__search {
    grid-area: 1 / 3 !important;
    justify-self: end !important;
}

• And Save.

[Made4uo-Ribe]

Hi @GFAD 

Do you mean next to the cart icon? Can I take a look? Would you mind to share store URL? Thanks!

[GFAD]

https://greatfindsanddesign.com/

I do mean next to the cart. We have the cart hidden since we don't sell online, only in store.

[Made4uo-Ribe · Accepted solution]

Thank for the info, im just referring to example picture.

Do you mean like this? 

If it is try this one then. 

• 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 "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
• And Save.

.header>.header__search {
    grid-area: 1 / 3 !important;
    justify-self: end !important;
}

• And Save.

[GFAD]

So I just realized that while this did work to move the search icon to the right it's overlapping with the cart icon so when people click on it they are directed to their empty card instead of the search unless they click in just the right spot. I tried re-aligning the cart icon to the right side of the header in the bass.css file but for some reason it isn't working.

[GFAD]

Sorry, I meant I tried moving the cart to the left side since I had moved the search to the right.

[Made4uo-Ribe · Accepted solution]

Yes, I check it but it seems you hide the wrong icon. 

I see this one, you display it none. When I remove this the other serch icon come up. when you click it it goes to search. 

Try this one. 

Add this in your base.css

@media screen and (min-width: 990px){
.header__icon--cart {
    display: none !important;
}
}

And Save. 

Then find the search icon in your base.css

In the line 2569, youll see it and change the display: none to like this.

And Save. 

I hope it help.

[Moeed]

Hey @GFAD 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[GFAD]

It's www.greatfindsanddesign.com