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

shreeg
Excursionist
18 0 7

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. 

0 Likes
PedroLandaverde
New Member
2 0 0

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!

0 Likes
TECH-IT-OUT-LTD
New Member
2 0 0

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? 

0 Likes
TECH-IT-OUT-LTD
New Member
2 0 0

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. 

0 Likes
PedroLandaverde
New Member
2 0 0

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!

0 Likes
evelynb23
New Member
5 0 0

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?

Screen Shot 2021-03-31 at 3.52.17 pm.png

0 Likes
suyash1
Shopify Partner
2737 290 452

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

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
evelynb23
New Member
5 0 0

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

0 Likes
suyash1
Shopify Partner
2737 290 452

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

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
evelynb23
New Member
5 0 0

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. 

Screen Shot 2021-03-31 at 4.15.44 pm.png

0 Likes