Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Move logo to left and add search bar in the middle

Move logo to left and add search bar in the middle

Charming_Beads
Excursionist
28 0 7

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

Replies 14 (14)
Charming_Beads
Excursionist
28 0 7

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

Charming_Beads
Excursionist
28 0 7

Hello - posted on this thread thanks

Tech_Coding
Shopify Partner
417 110 98

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.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
Charming_Beads
Excursionist
28 0 7

Thanks - both are on the thread now 🙂

Made4uo-Ribe
Shopify Partner
9094 2174 2684

Hi @Charming_Beads 

Would you mind sharing your store URL? Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Charming_Beads
Excursionist
28 0 7

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

Charming_Beads
Excursionist
28 0 7

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
Excursionist
28 0 7

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
Shopify Partner
9094 2174 2684

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

 

 

 

 

 

 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Charming_Beads
Excursionist
28 0 7

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

Made4uo-Ribe
Shopify Partner
9094 2174 2684

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. 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Charming_Beads
Excursionist
28 0 7

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
Excursionist
28 0 7

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
Shopify Partner
99 1 0

Hello @Charming_Beads,

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

Syn | eFoli
-Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants