Moving Search bar from left side to right side

Solved
Highlighted
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

1 Like
Highlighted
Shopify Partner
5824 850 1951

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
10 0 3

misohungry.ca

0 Likes
Highlighted
Shopify Partner
5824 850 1951

@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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
10 0 3

I undid the protection. 

sorry

0 Likes
Highlighted
Shopify Partner
5824 850 1951

@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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted

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' | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Secure Email: See https://dans-development-store.myshopify.com
0 Likes
Highlighted
Tourist
10 0 3

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

0 Likes
Highlighted

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' | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Secure Email: See https://dans-development-store.myshopify.com
1 Like
Highlighted
Tourist
10 0 3

thanks a lot for the help!

0 Likes