How to move a search bar to the left of a logo on desktop view?

omero · August 22, 2023, 10:59pm

Hello,

I need help moving my search bar to the left of my logo. I need this for my desktop view.

My url is designsfordivine.com

I would appreciate any help,

Thanks,

PageFly-Noah · August 23, 2023, 12:49am

Hi @omero

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Noah | PageFly

Made4uo-Ribe · August 23, 2023, 1:05am

Hi @omero

You can achieve the following edits by following the instructions below.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (min-width: 975px) {
.template-search__search {
    max-width: 27rem;
    top: -17rem;
    position: absolute;
    z-index: 10;
    width: 100%;
    left: 6rem;
}
.header details-modal.header__search {
    display: none;
}
}

@media only screen and (min-width: 1350px) {
.template-search__search {
    max-width: 30rem;
    top: -13rem;
}
}

@media only screen and (max-width: 980px) {
.template-search__search {
    display: none
 }
}

And Save.

Result here:

I hope it help.

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

omero · August 23, 2023, 1:14am

Thanks for your reply but this is the look I want to achieve

omero · August 23, 2023, 1:15am

Thanks I added the code in base.css but

1- now there is green area between header and main content in mobile view.

2- the search bar disappeared on desktop view

David_SHT · August 23, 2023, 1:16am

Hi @omero ,

This is David at SalesHunterThemes.

Thank you for your question.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → theme.liquid file.

Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Hopefully, this proves useful.
David | SalesHunterThemes team

omero · August 23, 2023, 1:22am

thanks for your reply, I need help placing here

PageFly-Noah · August 23, 2023, 1:30am

Got you, now you can try this:

With the same instructions above please

David_SHT · August 23, 2023, 1:33am