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

[omero]

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]

Hi @omero 

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
@media screen and (min-width: 767px){
.template-search__search {
margin: 0 !important;
}
}
</style>

Hope this can help you solve the issue 

Best regards,

Noah | PageFly

[omero]

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

[PageFly-Noah]

Got you, now you can try this:

<script>
function isDesktop() {
    return window.innerWidth > 768; // Adjust the breakpoint as needed
  }

  // Your code to move the element
  let pfInterval;

  if (isDesktop()) {
    pfInterval = setInterval(() => {
      const search = document.querySelector('.template-search__search');
      const searchBlock = document.querySelectorAll('details-modal.header__search')[1];
      if (search && searchBlock) {
        clearInterval(pfInterval);
        searchBlock.appendChild(search); // Using appendChild to move the element
      }
    }, 100);

    setTimeout(() => {
      clearInterval(pfInterval);
    }, 5000);
  }
</script>
<style>
@media screen and (min-width: 767px){
svg.modal__toggle-open.icon.icon-search {
    display: none;
}
}
</style>

With the same instructions above please

[Made4uo-Ribe]

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]

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]

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 </body> tag

<style>
 @media (min-width: 767px) {
  .template-search .template-search__search {
    margin-left: 0;
  }
 }
</style>

 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]

thanks for your reply, I need help placing here

 

[David_SHT]

Hi @omero ,

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 </body> tag

<style>
 @media (min-width: 767px) {
  .template-search .template-search__search {
    position: absolute;
    top: 5px;
    z-index: 3;
    left: 2%;
  }
  .header .header__search {
   display: none;
  }
 }
</style>

 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