Solved

Moving Search bar from left side to right side

Misohungry
Tourist
10 0 3

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

Accepted Solution (1)
GCWebTeam
Shopify Partner
158 13 170

This is an accepted solution.

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

 

and desktop is like this

desktopmiso.png

 

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

 

Dan the web man - GCWebTeam.com | Shopify Partner | FB Partner | Google Partner Need help with your store or Google ads / social media marketing? Hire: gcwebteam.com

View solution in original post

Replies 17 (17)

KetanKumar
Shopify Partner
36839 3635 11972

Hello, @Misohungry 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Misohungry
Tourist
10 0 3

misohungry.ca

KetanKumar
Shopify Partner
36839 3635 11972

@Misohungry 

Thanks for url

sorry, but your store is password protect.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Misohungry
Tourist
10 0 3

I undid the protection. 

sorry

KetanKumar
Shopify Partner
36839 3635 11972

@Misohungry 

Sorry, i can't see

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GCWebTeam
Shopify Partner
158 13 170

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.

🙂

 

Dan the web man - GCWebTeam.com | Shopify Partner | FB Partner | Google Partner Need help with your store or Google ads / social media marketing? Hire: gcwebteam.com
Misohungry
Tourist
10 0 3

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

GCWebTeam
Shopify Partner
158 13 170

This is an accepted solution.

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

 

and desktop is like this

desktopmiso.png

 

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

 

Dan the web man - GCWebTeam.com | Shopify Partner | FB Partner | Google Partner Need help with your store or Google ads / social media marketing? Hire: gcwebteam.com
Misohungry
Tourist
10 0 3

thanks a lot for the help!

Gatomaneiro
Visitor
2 0 0

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. 

Gatomaneiro
Visitor
2 0 0

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

Thanks again, 

GCWebTeam
Shopify Partner
158 13 170

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

 

Dan the web man - GCWebTeam.com | Shopify Partner | FB Partner | Google Partner Need help with your store or Google ads / social media marketing? Hire: gcwebteam.com
zuulado
Visitor
2 0 0

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

GCWebTeam
Shopify Partner
158 13 170

sure, whats your store URL?

Dan the web man - GCWebTeam.com | Shopify Partner | FB Partner | Google Partner Need help with your store or Google ads / social media marketing? Hire: gcwebteam.com
GCWebTeam
Shopify Partner
158 13 170

Or reach out to me privately @ below website. As this is a public forum.   🙂

Dan the web man - GCWebTeam.com | Shopify Partner | FB Partner | Google Partner Need help with your store or Google ads / social media marketing? Hire: gcwebteam.com
zuulado
Visitor
2 0 0
GCWebTeam
Shopify Partner
158 13 170

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.

 

🙂

🙂

Dan the web man - GCWebTeam.com | Shopify Partner | FB Partner | Google Partner Need help with your store or Google ads / social media marketing? Hire: gcwebteam.com