Re: I want to move the search bar, so you can still see the logo (Impulse Theme)

Solved

I want to move the search bar, so you can still see the logo (Impulse Theme)

renatarubio
New Member
9 0 0

Whenever I click the search bar with the impulse theme search button, it covers the whole logo. I would prefer the search bar to show up below or next to the logo. 

 

Screenshot 2024-05-22 at 1.16.58 PM.png

Accepted Solution (1)
AnneLuo
Shopify Partner
716 139 145

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
  .site-header__search-container {
       height: 125px !important;
   }
  @media screen and (max-width:768px) {
    .site-header__search-container {
       top: 125px;
    }
  }
</style>


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

View solution in original post

Replies 5 (5)

AnneLuo
Shopify Partner
716 139 145

Hi, @renatarubio 

Please share the store URL so that I can assist you.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

renatarubio
New Member
9 0 0

https://1c7766-42.myshopify.com/ 

 

Please let me know if you need anything else @AnneLuo.

JasmeetVT14313
Shopify Partner
215 50 58

Hi @renatarubio 
Can you try adding the below code to end of "theme.css"

@media screen and (min-width:769px) {
.site-header__search-container{height: 30%;}
}
@media screen and (max-width:768px) {
.site-header__search-container.is-active {
    bottom: -30px;
}

.site-header__search-container {
    height: 60%;
}
}

 If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

Unlock Your Store's Potential with a Free Consultation!
Ready to boost your Shopify store's performance?
Book a Free Consultation and get a comprehensive Store Audit today!
Don't miss this opportunity to enhance your online business.
AnneLuo
Shopify Partner
716 139 145

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
  .site-header__search-container {
       height: 125px !important;
   }
  @media screen and (max-width:768px) {
    .site-header__search-container {
       top: 125px;
    }
  }
</style>


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

aatifriaz67
New Member
4 0 0

To move the search bar in the Impulse theme on Shopify, go to the theme editor and adjust the header layout settings. Ensure the search bar is positioned to allow visibility of the logo, or use custom CSS for precise placement.