Moving Search bar from left side to right side

Store Design
1

I’m having a hard time figuring out how to move the search bar on our site.

I want to move it from the top-left header to the right-side of the page.

I am trying to find it in styles.scss.liquid.

can someone please help?

thanks

1 Like
2

Hello, @Misohungry

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

3

misohungry.ca

4

@Misohungry

Thanks for url

sorry, but your store is password protect.

5

I undid the protection.

sorry

6

@Misohungry

Sorry, i can’t see

7

Hi Misohungary,

Your store is still password protected. So I cannot see the searchbar to give you the code to fix.

Goto

online store >>> preferences >> scroll down and untick ‘enable password’

or post the password here ( can be changed later anyway )

What theme are you using? I have probably done this a dozen times before for your theme.

:slight_smile:

8

sorry! forgot to click save! should work now, hopefully.

9

Hi Miso,

theres not alot of room on the left. So mobile stays the same, hamburger appears. Ipad ish to width 959px is like this

ipadmiso.png
ipadmiso.png794×549 162 KB

and desktop is like this

desktopmiso.png
desktopmiso.png1066×625 461 KB

Add the below to the bottom of your theme.scss.liquid which is under ‘assets’ when you edit code for the theme

/* move search bar from left to right side */
 @media screen and (max-width: 959px) {
      #pageheader .search-box { float: right !important;}
} 

 @media screen and (min-width: 960px) {
       #pageheader .search-box { 
           right: 20px !important;
           float: right !important;
           position: absolute !important;
           top: 50px !important; }
}

Adjust the top 50px for vertical alignment, right 20px for horizontal alignment.

Theres not a real lot of space to add the search bar into the same line, so above looks fine.

Hope this helps everyone

1 Like
10

thanks a lot for the help!

11

hey i need some help from moving my search icon from right to left. can you help??

12

sure, whats your store URL?

13

Or reach out to me privately [email removed] below website. As this is a public forum. :slightly_smiling_face:

14

https://zuzulala.myshopify.com/

15

Cant see without the store password, but you are using shopify theme brooklyn, absolutely doable. Hit me up directly at the website in my signature and I’ll do it. The explanation will take longer than actually completeing the task, and unless you are very comfortable with the backend coding, likely to break your theme.

:slightly_smiling_face:

:slightly_smiling_face:

16

hi team,

I tried the above code, under base.css, and no luck. Could you please help me?
I want to also move my search icon from left to right, alongside other icons all on the right.

17

Hi guys, is there anyone there who can help with my above issue?

Thanks again,

18

Whats the store URL ? it really depends on the theme choice and the code changes, if you hire someone, they’ll do for sure as they can see the whole theme code. Lets start with your store url and see ..