Brooklyn Theme - Change Search Modal Popup to just a bar?

Valery_Nguyen
Excursionist
25 0 7

Hi, 

I really hate the search modal that came with this theme. The popup takes up the whole screen and it's not very appealing. Is there a way to remove this and just have a search bar like the Venture theme? Or if that is not possible, can I resize the popup? How?

 

Thank you!

AbsüreClothing
Tourist
20 0 0

Have you found a solution to this ?

0 Likes
Jordan88
Tourist
3 0 0

Hi,

 

Looking for the same solution.

Thanks in advance.

0 Likes
Delbarton_Shopi
Tourist
12 0 2

Any luck?

 

0 Likes
David_1
Excursionist
20 0 3

Me and my friend are looking for the same solution. Does really noone know how to do this?

 

I found in Google Chrome's inspect function how to move the search bar into the top right corner in the pop p, so all really needed is to make the white field/layer that covers the whole screen transparent instead of white, but I can't find what code to adjust. 

0 Likes
maulikp
Excursionist
27 5 14

Hi There,


Yes, you can modify it by comment out search code in header.liquid file and add
{% include 'search-bar%} code below.

so your code looks like below code.

{%comment%}                 
                  <li class="site-nav__item site-nav__item--compressed">
                    <a href="{{ routes.search_url }}" class="site-nav__link site-nav__link--icon{% if search_modal %} js-toggle-search-modal{% endif %}" data-mfp-src="#SearchModal">
                      <span class="icon-fallback-text">
                        <span class="icon icon-search" aria-hidden="true"></span>
                        <span class="fallback-text">{{ 'general.search.title' | t }}</span>
                      </span>
                    </a>
                  </li>
 {%endcomment%} 
                
 {% include 'search-bar' %}

Screenshot: https://prnt.sc/okquqx
Screenshot: https://prnt.sc/okqwvr

Note: After bar appearing, you need to add custom CSS so it looks as per part your theme.

If helpful then please Like and Accept Solution.
David_1
Excursionist
20 0 3

Thank you so much!!! I did it and highly appreciate your help and I am about to figure out where to add the custom css and would love some clues, since my coding skill is very outdated (15 years ago I did some CSS and classic asp and HTML. 

 

The search box icon is this color 996633 and turn this color cc9933 on mouseover, so to find where the style is located I tried to search for those colors in the header, timber, theme, and other files, but I can't find anything. 

 

I also found this, but I don't even have a style.css in my Assets section, so this is probably outdated or different because it is another theme as well. 

https://community.shopify.com/c/Shopify-Design/Search-Bar-Modification/m-p/63508  

 

Would be so thankful for some clues. Thanks in advance if you can give me some!

 

 

Edit: 

I'm getting closer, I found this in theme.scss.liquid, but that shapes the other search bar and if I copy this and adjust it I don't know how to "connect it" with the new search bar in the header. 

 

/*================ Search bar ================*/
.site-nav--search__bar {
vertical-align: middle;
padding: 0 10px 7px 0;

input {
background-color: $colorInputBg;
}
}

 

 

I also found this in search-bar.liquid but I have no idea what/where Forms > Input Groups can be found. 

 

"A snippet to include a search bar anywhere in your theme.
Note we are using 'input-group' for the layout. Look under Forms > Input Groups for some demos"

0 Likes
David_1
Excursionist
20 0 3

Please disregard the above comment as I have now gotten a bit further.

 

I have now managed to find the timber.scss.liquid-place where you change the width of the search bar, but even when I make it 130 px wide it still causes rowbreaks over itself and under itself, so that it is under the menu, brings down the left logo with it and pushes down the cart log under it, so the page is still useless with this design. 

 

I would be so thankful if you knew how to fix this, avoid row breaks. I could pm you the URL and password to visit the store if you need to see source code or paste it here (store not open yet). 

shopify_screenshot.jpg

I went back to the original design and I see that the space is so tiny, causing the row breaks, so i would either need to expand the space or create an expandable search bar that expands over or under the menu when the icon is clicked.

Any ideas? Is there a modul to just copy this from another theme (click search icon in top right corner). 

https://authenticmuaythaisupply.com

This is how it is supposed to be lined up. shopify_screenshot2.jpg 

 

 

 

A lesser problem is that I don't know how to change the search icon box to black or grey instead of brown. 

 

 


@maulikp wrote:

Hi There,


Yes, you can modify it by comment out search code in header.liquid file and add
{% include 'search-bar%} code below.

so your code looks like below code.

{%comment%}                 
                  <li class="site-nav__item site-nav__item--compressed">
                    <a href="{{ routes.search_url }}" class="site-nav__link site-nav__link--icon{% if search_modal %} js-toggle-search-modal{% endif %}" data-mfp-src="#SearchModal">
                      <span class="icon-fallback-text">
                        <span class="icon icon-search" aria-hidden="true"></span>
                        <span class="fallback-text">{{ 'general.search.title' | t }}</span>
                      </span>
                    </a>
                  </li>
 {%endcomment%} 
                
 {% include 'search-bar' %}

Screenshot: https://prnt.sc/okquqx
Screenshot: https://prnt.sc/okqwvr

Note: After bar appearing, you need to add custom CSS so it looks as per part your theme.

0 Likes
maulikp
Excursionist
27 5 14

Hi There,

Happy that this trick will be working for you . And in the first comment, I have mentioned that after this code you need to add custom CSS.
for search icon box to black or gray instead of brown, you can add "background-color: #000 !important;" property or use a color property.
and for change color on mouser over it's called ":hover" Selector, and by adding position and max-width and other CSS you can solve row braking problems. And if you want to find other CSS then use https://www.w3schools.com/css/default.asp this. And you can also hire a developer to fix it.


Thanks!

If helpful then please Like and Accept Solution.
0 Likes
Delbarton_Shopi
Tourist
12 0 2
What if I don’t beaver a header.liquid because of an older Brooklyn theme?
0 Likes