How do you move the search button to the right side of the header using Refresh Theme?

Store Design
, , ,
1

Hi,

How do you move the search button to the right side of the header using Refresh Theme?

I have looked everywhere for an answer to this, but can’t seem to find anything that relates to the Refresh Theme. I have tried multiple lines of code used to solve the issue with other themes but none have worked or the code “title” isn’t in the Refresh Theme.

If anyone can help, it would be greatly appreciated.

Thanks

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media (min-width: 990px) {
.header--top-center > .header__search {
grid-area: icons !important;
display: flex !important;
justify-self: end !important;
padding-right: 35px !important;
}
}

ZestardTech_0-1696398919788.png
ZestardTech_0-1696398919788.png1880×760 205 KB

3

Hi @Ulm1000

You can move the icon using HTML.

In header.liquid file need to move Icon code to right.

4

Hey @Ulm1000

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

Best Regards,
Moeed

5

Hi @Ulm1000

Could you share your store URL?

6

Hi,

This hasn’t worked for me. Its on the right for mobile but not desktop.

Thanks

7

I managed to work it out. Anything below that reads as “Right” I changed from “Left” which has solved the issue. Your code is still at the bottom.

Starting line 2615

.header__icon–menu[aria-expanded=“true”]::before {
content: “”;
top: 100%;
right: 0;
height: calc(
var(–viewport-height, 100vh) - (var(–header-bottom-position, 100%))
);
width: 100%;
display: block;
position: absolute;
background: rgba(var(–color-foreground), 0.5);
}

/* Search */
menu-drawer + .header__search {
display: none;
}

.header > .header__search {
grid-area: right-icons;
justify-self: start;
}