Reduce Size or Remove Search Bar in Mobile View Brooklyn Theme

Solved
califluffco
Excursionist
41 2 8

Hi all!

I'm hoping someone can help me - i'm trying to remove the search bar or just reduce the size of how large the search bar is in the mobile view. It's abnormally large. This is for the Brooklyn theme. See photo below. 

 

Website is: https://cali-fluff-co.myshopify.com/ password is: bainga 

 

Screen Shot 2020-08-17 at 9.36.59 PM.png

dmwwebartisan
Shopify Partner
5851 1338 1715

Hey @califluffco,

Please try to put the following code at the bottom of your assets/theme.scss liquid file.

If you want to reduce the size

@media screen and (max-width: 768px) {
.btn, .btn--secondary{ padding: 0px !important }
.input-group .input-group-field{ height: 0px !important; }
}


If you want to remove then use following

@media screen and (max-width: 768px) {
.search-bar--drawer { display: none }
}

 

Hope this will work for you.

 

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
KetanKumar
Shopify Partner
17277 1871 6459

Hello, @califluffco 

Welcome to the Shopify community!
and Thanks for your question.

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

.search-bar--drawer {
display: none;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
califluffco
Excursionist
41 2 8

@dmwwebartisan 

 

Hi! It worked partially see photo below, looks like the actual search/enter button would need to be reduced too.

Also, how would I go about then reducing the "search our store" font size. 

Screen Shot 2020-08-17 at 10.24.31 PM.png

0 Likes

@califluffco 

Add this additional code to your CSS to fix the new problem you had:

@media (max-width: 767px){
    [id] form.input-group.search-bar.search-bar--drawer {
    display: flex;

}

[id] form.input-group.search-bar.search-bar--drawer > input{

    min-height:  45px;
}

[id] form.input-group.search-bar.search-bar--drawer > span{
    width: 57px;
}

[id] form.input-group.search-bar.search-bar--drawer > span > *{
width: 100%;
max-width: 100%;
}
}


Please let me know if it works

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Add a slider to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Contact: ezfycode@gmail.com.
0 Likes
califluffco
Excursionist
41 2 8

@diego_ezfy hi there, it just made it go back to normal (what it looked like from the start). 

0 Likes

This is an accepted solution.

@califluffco 

Delete all the custom code and add this then:

    .drawer__inner > form{
    transform: scale(.8);
}

It will look like this:

dantepw_0-1597730188105.png

 

 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Add a slider to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Contact: ezfycode@gmail.com.
califluffco
Excursionist
41 2 8

That worked thank you!

 

@KetanKumar also thank you, your code worked if I want to remove it in the future - appreciate it. 

0 Likes

@califluffco 

You're very welcome! Wishing you a great day.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Add a slider to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Contact: ezfycode@gmail.com.
0 Likes
danbreyt
Excursionist
14 0 4

Hello @diego_ezfy

I just followed the steps you provided and successfully fixed the size of my menu search feature. Only thing is that it only seemed to be corrected on mobile but not desktop. Is there any way to make the same correction for making the search feature in the same as on mobile?

 

0 Likes