Brooklyn theme search bar edit

[shreeg]

Hi all,

I am almost ready to go live with my site but I have a final few touch-ups left - the biggest one being amending the look of the search bar on my Shopify brooklyn theme. Currently when I click the search bar icon from my menu bar then it will display a full page pop up with a search box... this covers up my entire store and is quite unappealing. I need some help to make it so that there is a small pop up search extension when I click the search icon, or even if the pop up which comes up covers only 1/4 of the page. This would allow my customers to still view the products while they search.  The previous topics have not had a working solution to this..

Any help is much appreciated!

[emcatlin]

Following! I'm having the same issue.

[jay234]

Hi, I found a code for this which helped my page! It definitely looks a lot better than the full white page but isn't perfect. type this code on theme.scss at the bottom!

@media screen and (min-width: 769px) {
.mfp-content {
display: flex;
align-content: center;
justify-content: center;
}

.mfp-wrap {
height: 10%;
}

.mfp-bg.mfp-fade.mfp-ready {
height: 10%;
box-shadow: 1px 1px 4px black;
}

form.input-group.search-bar.search-bar--modal {
margin: 5% auto 0;
}

button.mfp-close {
margin-top: 10px;
}
}

[pelky]

Hi Jay, 

Nice edit, I was looking for something very similar. Just curious if you were able to update the code so that it scrolls while active?

Thanks, 
Josh