All things Shopify and commerce
Hello.
My site that I am building has a magnifying glass on the left that I know my eldery customer base will miss.
I am looking to get rid of that, move my logo to the left, and then have a nice big search bar in the centre.
Could someone please help?
Many thanks,
Paul
That would be great if you can put them on here? Many thanks
Hello - posted on this thread thanks
Hello @Charming_Beads
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.
Thanks - both are on the thread now 🙂
Would you mind sharing your store URL? Thanks!
Hello - I put these details on the thread now ... thanks
Thanks all - so many replies!
My store url is Charming Beads (a2fdaa-db.myshopify.com) whilst I am building the shop, and password is zico2000.
Any help with the code or css would be massively appreciated. I'm a bit of a novice when it comes to the coding ...
Thank you but I don't wish to be handing out email or putting it publicly here, and there is no way for me to DM you.
Thanks for the info. Just to clarify, the search bar is not sticky in the header—it only appears when you click the search icon. To make it sticky or stay visible on the header, a developer would need to implement the design. But if you just like to move the search icon to right and logo to left.
Check for this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
@media only screen and (min-width: 749px){
.header--top-center {
grid-template-areas:
"heading left-icons icons"
"navigation navigation navigation";
}
.header {
grid-template-columns: 1fr;
}
.header--top-center .header__heading-link, .header--top-center .header__heading {
justify-self: left;
padding-left: 20px;
}
}
And Save.
Result
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Okay well thanks for trying. But I really need the big search box in the middle. Not sure what to do now.
When you click the search icon, that is the time the search bar come out. It needs to edits some code in the backend to make the bar visible and no need the icon.
Sure thanks - I get that. I just don;t know how to edit the code in the backend to make it part of the header. I'll keep researching and see what I can come up with. Thanks again for your help.
I do thank you for that though, and I have implemented it as a half way solution as it is still a lot better than before 🙂
Hello @Charming_Beads,
Please share your website's URL so that I can check
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024