How can I change the search bar opening in Brooklyn theme?

Technical Q&A
1

Hi Shopify community!

I would like to ask you for help, regarding the search bar. Currently I have set my search icon into modal, but I would like to change how it opens. Instead of full page opening I would like to have a opening or static box in the same row of the navigation menu. Is this any how possible?

Screenshot 2021-11-14 at 20.01.17.png
Screenshot 2021-11-14 at 20.01.17.png2088×736 88.6 KB

  • Debut theme has this kind of search option I would like to have, but I am working in Brooklyn theme :).

I have seen similar question here in shopify community but it didn’t work for me.

Thank you for your help!!

2

Hi @mayamoodswings ,

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > timer.scss.liquid and paste this at the bottom of the file:
.mfp-bg.mfp-fade.mfp-ready{
	display: none !important;
}
.mfp-wrap{
	height: 90px !important;
    background: #fff;
}
.mfp-container{
	height: 90px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content{
	width: auto !important;
}
.search-bar--modal{
	margin: 0 !important;
}

Hope it helps!

3

Thank you, this worked perfectly!!