Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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
and desktop is like this
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
Hello, @Misohungry
Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.
misohungry.ca
Thanks for url
sorry, but your store is password protect.
I undid the protection.
sorry
Sorry, i can't see
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.
🙂
sorry! forgot to click save! should work now, hopefully.
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
and desktop is like this
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
thanks a lot for the help!
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.
Hi guys, is there anyone there who can help with my above issue?
Thanks again,
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 ..
hey i need some help from moving my search icon from right to left. can you help??
sure, whats your store URL?
Or reach out to me privately @ below website. As this is a public forum. 🙂
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.
🙂
🙂
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024