Liquid, JavaScript, themes, sales channels
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?
- 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!!
Solved! Go to the solution
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!
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!
Thank you, this worked perfectly!!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024