Search bar in Brooklyn theme

Solved
mayamoodswings
Tourist
11 0 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

- 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!!

Accepted Solution (1)

Accepted Solutions
LitExtension
Shopify Partner
1935 317 391

This is an accepted solution.

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!

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!

View solution in original post

Replies 2 (2)
LitExtension
Shopify Partner
1935 317 391

This is an accepted solution.

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!

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!

View solution in original post

mayamoodswings
Tourist
11 0 1

Thank you, this worked perfectly!!