How can I reposition elements within a webpage header?

Technical Q&A
, ,
1

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:

GFAD_1-1696526845498.png
GFAD_1-1696526845498.png1540×231 21.3 KB

We have this:

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

Thanks so much!

1 Like
2

Hi @GFAD

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

3

Hey @GFAD

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

Best Regards,
Moeed

4

https://greatfindsanddesign.com/

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

1 Like
5

It’s www.greatfindsanddesign.com

6

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

Do you mean like this?

Made4uoRibe_0-1696536401675.png
Made4uoRibe_0-1696536401675.png1140×234 111 KB

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.
1 Like
7

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.

8

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

1 Like
9

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

Made4uoRibe_0-1697052119572.png
Made4uoRibe_0-1697052119572.png210×143 3.14 KB

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.

Made4uoRibe_1-1697052142070.png

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

Made4uoRibe_2-1697052496395.png

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

Made4uoRibe_3-1697052552090.png

And Save.

I hope it help.

1 Like