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

[Valery_Nguyen]

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]

Have you found a solution to this ?

[Jordan88]

Hi,

Looking for the same solution.

Thanks in advance.

[Delbarton_Shopi]

Any luck?

[David_1]

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. 

[maulikp]

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.

[David_1]

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"

[David_1]

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). 

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.  

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.

[maulikp]

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!

[Delbarton_Shopi]

What if I don’t beaver a header.liquid because of an older Brooklyn theme?

[shreeg]

Hi, the above solution unfortunately didn't work for me. Though if I could get the current modal search bar pop up to just cover even 1/4 of half of the page, rather than the full page, then I would be stoked. Would appreciate any help. 

[PedroLandaverde]

The modal search of the Brooklyn theme seems to have some styling issues. The following modifications can help improve how its display.

theme.scss.liquid

Modify  .mfp-bg , .mfp-container, button.mfp-close as follows

.mfp-bg {
  background-color: #000;

  &.mfp-fade {
    -webkit-backface-visibility: hidden;
    opacity: 0;
    @include transition(all 0.3s ease-out);

    //background opacity after load
    &.mfp-ready {
      opacity: .75;
      filter: alpha(opacity=75);
    }

    &.mfp-removing {
      @include transition(all 0.3s ease-out);
      opacity: 0;
      filter: alpha(opacity=0);
    }
  }
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  top: 0;
  padding: 0 8px;
  background-color: $colorBody;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

.mfp-content {
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; 
}

button.mfp-close {
  margin: 15px 7px;
  font-size: em(40px);
  font-weight: 300px;
  opacity: 1;
  filter: alpha(opacity=100);
  color: $colorTextBody;
}

Search for .site-nav--search__bar and add the following styles for .search-bar--modal below

.search-bar--modal {
  margin: 15px 50px 0 0;
}

 Hope this helps!

[TECH-IT-OUT-LTD]

The following instruction description is a lot easier way to alter Search Modal Popup in the Navigation Bar.

Click on Header on the Home Page - Scroll bar down to Navigation - Click on the Navigation Search Type arrows and a drop down menu appears with three options to choose from Modal, Page or None - Click on your preferred option and then click Save.

What I need an explanation on is what is the difference between Modal and Page version does anybody have this in formation to provide to me? 

[TECH-IT-OUT-LTD]

Sorry my last post should have also included Click on Online Store - Themes should be already highlighted - Click on the right hand side Customize button - then Click on Header on the Home Page - Scroll bar down to Navigation - Click on the Navigation Search Type arrows and a drop down menu appears with three options to choose from Modal, Page or None - Click on your preferred option and then click Save.

If anyone can still answer my query though on Modal then that will be Great as well.

Thanks. 

[PedroLandaverde]

Hi, That is correct, the customization that I shared applies only to the modal version.

About the difference between the modal and page version of the search:

• The "modal" version works as a pop-up, covering 100% of the screen and where the search input is displayed. The CSS customization that I share is so that this pop-up is not so intrusive and only covers the top of the screen.
• The version of "page" is simply redirects the user to the search page of the theme so they can use the search input located on that page to perform their search.

 Hope this helps!

[evelynb23]

This is so helpful! Thanks! 

This is my result in screnshot attached.

Is there anyway to have the search type text bar (the box where i have qwritten 'tea' - not sure what its called in technical terms!) extend to be longer? Say - more like halfway across the page?

[suyash1]

@evelynb23 - this will need css change, please share website URL so I can share css

[evelynb23]

Thanks - but I would like to learn how to do it. Can you tell me what to edit in the CSS?

[suyash1]

@evelynb23 - will need site link for that only, need to find what classes used so can let you know css

[evelynb23]

The first screenshot was from my test site - now I've put the code into the real site and I somehow seem to have altered it and have a big white box surrounding my serarch bar now? and the search bar is in the middle as opposed to left aligned. lol. 

[suyash1]

@evelynb23 - if you want you can email me the site link and we can check and make changes as per need