How can I move the search icon position in Dawn theme?

[cabinandcrate]

Hi,

Our website is https://romanandisaac.co.uk/ - password is isaac

How could we go about moving the search icon to the right side of the page show it was showing next to the cart instead of on the left next to the menu?

Thanks

[Dan-From-Ryviu]

Hi @cabinandcrate

You can do that by adding this code at the bottom of your base.css file in Online store > Themes > Edit code > Assets

.header > .header__search {
    grid-area: icons !important;
    justify-self: flex-end !important;
    margin-right: 34px !important;
}

[cabinandcrate]

Thanks - have just tried this although doesn’t seem to have worked unfortunately.

[Dan-From-Ryviu]

Did you try to clear your browser cache after adding code? And can you show me where did you added code?

[David_SHT]

Hi @cabinandcrate ,

This is David at SalesHunterThemes.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → base.css file.

Add this following code at the bottom of page.

@media screen and (min-width: 990px)
 .header--top-center.drawer-menu {
    grid-template-areas: 'left-icons heading search-icon icons';
 }
 .header > .header__search {
   grid-area: search-icon;
   justify-self: end;
 }
}

result:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

[cabinandcrate]

I managed to get it working by just adding your code to the current the current .header > .header__search { further up in the file.

Thanks for your help.

[Dan-From-Ryviu]

Awesome !

[Sparkssales]

This worked for me, you can edit the margin number margin-right: 34px !important

I changed it to 90px which worked well on our site