Move logo to left and add search bar in the middle

Shopify Discussion
,
1

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

2 Likes
2

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.

3

Hi @Charming_Beads

Would you mind sharing your store URL? Thanks!

4

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 …

5

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.

6

That would be great if you can put them on here? Many thanks

7

Hello - posted on this thread thanks

8

Thanks - both are on the thread now :slightly_smiling_face:

9

Hello - I put these details on the thread now … thanks

10

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

Made4uoRibe_1-1725554108863.png
Made4uoRibe_1-1725554108863.png1134×365 80.7 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

11

Okay well thanks for trying. But I really need the big search box in the middle. Not sure what to do now.

12

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.

13

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 :slightly_smiling_face:

14

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.