Move logo to left and add search bar in the middle

[Charming_Beads]

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

[Charming_Beads]

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

[Sangeetanahar]

hello @Charming_Beads 

can you send me the Website URL

thanks

[Charming_Beads]

Hello - posted on this thread thanks

[Tech_Coding]

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.

[Charming_Beads]

Thanks - both are on the thread now 🙂

[Made4uo-Ribe]

Hi @Charming_Beads 

Would you mind sharing your store URL? Thanks!

[Charming_Beads]

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

[Charming_Beads]

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

[Charming_Beads]

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.

[Made4uo-Ribe]

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!

[Charming_Beads]

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

[Made4uo-Ribe]

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. 

[Charming_Beads]

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.

[Charming_Beads]

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 🙂

[EFOLI-Syn]

Hello @Charming_Beads,

Please share your website's URL so that I can check