Re: Search Bar Stay Expanded Under Header - TRADE Theme

Solved

Search Bar Stay Expanded Under Header - TRADE Theme

svandervort
Excursionist
21 0 4

I am trying to get the search field to be expanded automatically below the header on my site instead of having an icon to click on. Would appreciate any guidance on this.

Accepted Solutions (5)
BSS-TekLabs
Shopify Partner
2350 688 806

This is an accepted solution.

1. Go to file r 'header-search.liquid' find the code "header__search" like this

BSSTekLabs_0-1723130857677.png

BSSTekLabs_1-1723130872177.png

 

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSS-TekLabs
Shopify Partner
2350 688 806

This is an accepted solution.

details[open] .modal-overlay, .modal__close-button .icon {
    display: none !important;
}
details[open]>.search-modal, #MainContent {
margin-top: 54px !important;
}

 Add this code to last line file base.css

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSS-TekLabs
Shopify Partner
2350 688 806

This is an accepted solution.

BSSTekLabs_2-1723131052519.png

When you're done, you'll get results like this.

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSS-TekLabs
Shopify Partner
2350 688 806

This is an accepted solution.

.mega-menu[open] .mega-menu__content {
    margin-top: 54px !important;
}

Add more code to base.css to show full sub menu

BSSTekLabs_0-1723131458869.png

 


- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you @svandervort .

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSS-TekLabs
Shopify Partner
2350 688 806

This is an accepted solution.

 

.header__heading-logo {
    position: relative !important;
    z-index: 999 !important;
}
details[open]>.search-modal, #MainContent {
    margin-top: 60px !important;
}

 

 

Add more code to base.css to display full logo  @svandervort 

 

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 18 (18)

BSS-TekLabs
Shopify Partner
2350 688 806


Hello @svandervort .
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
svandervort
Excursionist
21 0 4
BSS-TekLabs
Shopify Partner
2350 688 806

BSSTekLabs_0-1723128812167.png

Do you want to like this @svandervort ?

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
svandervort
Excursionist
21 0 4

Yes

BSS-TekLabs
Shopify Partner
2350 688 806

This is an accepted solution.

1. Go to file r 'header-search.liquid' find the code "header__search" like this

BSSTekLabs_0-1723130857677.png

BSSTekLabs_1-1723130872177.png

 

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
BSS-TekLabs
Shopify Partner
2350 688 806

This is an accepted solution.

details[open] .modal-overlay, .modal__close-button .icon {
    display: none !important;
}
details[open]>.search-modal, #MainContent {
margin-top: 54px !important;
}

 Add this code to last line file base.css

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
BSS-TekLabs
Shopify Partner
2350 688 806

This is an accepted solution.

BSSTekLabs_2-1723131052519.png

When you're done, you'll get results like this.

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
BSS-TekLabs
Shopify Partner
2350 688 806

If you want hide search icon. Add more this code

.header__icon {
    display: none !important;
}

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
BSS-TekLabs
Shopify Partner
2350 688 806

This is an accepted solution.

.mega-menu[open] .mega-menu__content {
    margin-top: 54px !important;
}

Add more code to base.css to show full sub menu

BSSTekLabs_0-1723131458869.png

 


- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you @svandervort .

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
BSS-TekLabs
Shopify Partner
2350 688 806

This is an accepted solution.

 

.header__heading-logo {
    position: relative !important;
    z-index: 999 !important;
}
details[open]>.search-modal, #MainContent {
    margin-top: 60px !important;
}

 

 

Add more code to base.css to display full logo  @svandervort 

 

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
BSS-TekLabs
Shopify Partner
2350 688 806

BSSTekLabs_2-1723479508058.png

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
cmcmahon211
Tourist
5 0 1

Hey! I cannot get this to work....is there something you can post that I can copy and paste....It added the word Details with an arrow??

Screenshot 2024-09-26 at 9.38.37 AM.png

BSS-TekLabs
Shopify Partner
2350 688 806

What do you need help with, please state the problem you are having @cmcmahon211 .

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
cmcmahon211
Tourist
5 0 1

And now nothing in my header is clickable

BSS-TekLabs
Shopify Partner
2350 688 806

Can you message me and share the link to your store so I can check?

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
cmcmahon211
Tourist
5 0 1

I just removed the code, ha....my whole header was messed up....can you go through again what I need to put in there? I thought I followed the steps exactly. 

 

https://d4e571-49.myshopify.com/

 

cmcmahon211
Tourist
5 0 1

I will try your steps again from above so you can check it. 

cmcmahon211
Tourist
5 0 1

Screenshot 2024-09-26 at 10.07.32 AM.pngIs this where I add it?