Re: Remove Search Bar from header on Warehouse theme

Solved

Remove Search Bar from header on Warehouse theme

KanikaJhala
Tourist
5 0 0

Hi,

I need help in removing the search bar from the header on the warehouse theme. Please tell me what part of the code needs to be changed for this. 

 

Accepted Solution (1)
oscprofessional
Shopify Partner
15961 2387 3095

This is an accepted solution.

.search-bar__top-wrapper {
    display: none;
}


Hello
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Replies 6 (6)

oscprofessional
Shopify Partner
15961 2387 3095

Hello,
Please share your site url.
So that i can check and let you know the exact solution here.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
oscprofessional
Shopify Partner
15961 2387 3095

This is an accepted solution.

.search-bar__top-wrapper {
    display: none;
}


Hello
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
KanikaJhala
Tourist
5 0 0

Thanks so much works perfectly! Can you please also tell me how I can reduce the size of the search bar if I want to keep it visible?

The input field on the search bar is too wide, how can I reduce the width of that?

Thanks so much for your help!

oscprofessional
Shopify Partner
15961 2387 3095

okay,
You just have to paste the below code in Online store -> Theme ->Edit code ->Asset ->theme.scss.css

.header__search-bar-wrapper {
    flex: 0 0 auto;
    width: 34%; /*set width as you want*/
    margin: 0 auto;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
CamiC
Excursionist
34 0 13

Hi, this code also erase my search on the mobile, the icon is there but if I click I don't have the space to search. Is there any chance I can erase the search bar from the desktop but not on the mobile?