search bar

Solved

search bar

masudamc20
Tourist
6 0 1

How would I do to expand the search bar in publisher theme ?

Accepted Solution (1)
BSSCommerce-B2B
Shopify Partner
565 114 137

This is an accepted solution.

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file base.css. Search for the following CSS snippet

 

@media screen and (min-width: 990px) {
    .header--top-left, .header--middle-left:not(.header--has-menu) {
        grid-template-areas:
        'heading icons'
        'navigation navigation';
        grid-template-columns: 1fr auto;
    }
}

 

Please change to it

 

@media screen and (min-width: 990px) {
    .header--top-left, .header--middle-left:not(.header--has-menu) {
        grid-template-areas:
        'heading searchbar icons'
        'navigation navigation navigation';
        grid-template-columns: 1fr 1fr 1fr;
    }
    .header__search {
        display: none !important;
    }
}

 

Step 3. Find the file theme.js or global.js. Add the following JS snippet

 

(() => {
if(window.innerWidth > 750) {
let checkExistInterval = setInterval(function() {
    let heading = document.querySelector(".header__heading");
    let predictiveSearch = document.querySelector("predictive-search");
    if (heading && predictiveSearch) {
        heading.insertAdjacentElement("afterend", predictiveSearch);
        clearInterval(checkExistInterval);
    }
}, 100);

setTimeout(function() {
    clearInterval(checkExistInterval);
}, 10000);
}
})()

 

Result

BSSCommerceB2B_0-1718530925084.png

 

If it helps you, please like and mark it as the solution.

Best Regards

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 12 (12)

BSSCommerce-HDL
Shopify Partner
1103 378 448

Hi @masudamc20,  Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BSSCommerce-HDL
Shopify Partner
1103 378 448

Hi @masudamc20
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_0-1718520085261.png

 

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tags

BSSCommerceHDL_2-1718520154092.png

 

@media only screen and (min-width: 990px) {
    .search-modal__form {
        max-width: 100% !important;
    }
}

 

Here is result: 

BSSCommerceHDL_3-1718520260735.png

Hope this can help you,

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

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

BSSCommerce-B2B
Shopify Partner
565 114 137

hi @masudamc20 

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file base.css. Search for the following CSS snippet

@media screen and (min-width: 990px) {
    .search-modal__form {
        max-width: 74.2rem;
    }
}

Please change to it

@media screen and (min-width: 990px) {
    .search-modal__form {
       
    }
}

Result

BSSCommerceB2B_0-1718519616855.png

If it helps you, please like and mark it as the solution.

Best Regards

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
masudamc20
Tourist
6 0 1

Dear, I have done as you have suggested. But things still unchanged.shopify 1.pngshopify 2.pngshopify 3.png

BSSCommerce-B2B
Shopify Partner
565 114 137

oh sorry

Please use this code snippet

@media screen and (min-width: 990px) {
    .search-modal__form {
       max-width: 100% !important;
    }
}

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
masudamc20
Tourist
6 0 1

yes. I have done. still the problem exist.

BSSCommerce-B2B
Shopify Partner
565 114 137

I've noticed the search bar has extended. What other issues are remaining?

Are you looking to expand the height of the search bar?

BSSCommerceB2B_0-1718527163728.png

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
masudamc20
Tourist
6 0 1

I want the search bar is visible always as the picture attached. thank you for your continuous support with patience. shopify 7.png

BSSCommerce-B2B
Shopify Partner
565 114 137

This is an accepted solution.

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file base.css. Search for the following CSS snippet

 

@media screen and (min-width: 990px) {
    .header--top-left, .header--middle-left:not(.header--has-menu) {
        grid-template-areas:
        'heading icons'
        'navigation navigation';
        grid-template-columns: 1fr auto;
    }
}

 

Please change to it

 

@media screen and (min-width: 990px) {
    .header--top-left, .header--middle-left:not(.header--has-menu) {
        grid-template-areas:
        'heading searchbar icons'
        'navigation navigation navigation';
        grid-template-columns: 1fr 1fr 1fr;
    }
    .header__search {
        display: none !important;
    }
}

 

Step 3. Find the file theme.js or global.js. Add the following JS snippet

 

(() => {
if(window.innerWidth > 750) {
let checkExistInterval = setInterval(function() {
    let heading = document.querySelector(".header__heading");
    let predictiveSearch = document.querySelector("predictive-search");
    if (heading && predictiveSearch) {
        heading.insertAdjacentElement("afterend", predictiveSearch);
        clearInterval(checkExistInterval);
    }
}, 100);

setTimeout(function() {
    clearInterval(checkExistInterval);
}, 10000);
}
})()

 

Result

BSSCommerceB2B_0-1718530925084.png

 

If it helps you, please like and mark it as the solution.

Best Regards

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
masudamc20
Tourist
6 0 1

this solution is working. thank you again! you are a real expert on shopify. 

AngrySuzy1
New Member
4 0 0

Hi i see this is something i would like to have on my site. Could you please help me for which solution i need to make my search bar long and in the centresearch.png here is my site url angrysuzy.co.uk