Move Mobile Search Bar to Bottom of Drawer - Brooklyn Theme

Solved
kaiyacollects
Explorer
46 1 20

I managed to add a search bar to my mobile drawer by adding this code to the bottom of drawer-menu.liquid

 

{% include 'search-bar' %}

 

Would it be possible to move this search box to the bottom of the drawer?

 

Thanks in advance!

 

www.kaiyascollectibles.com

pw=yaya

0 Likes
Natztech
Shopify Partner
1336 371 908

This is an accepted solution.

hello @kaiyacollects 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

form.input-group.search-bar {
    position: absolute;
    bottom: 0;
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
dmwwebartisan
Shopify Partner
7324 1729 2305

This is an accepted solution.

@kaiyacollects 

Please add the following code at the bottom of your assets/theme.css file.

 

form.input-group.search-bar {
    position: absolute;
    bottom: 0;
}

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
kaiyacollects
Explorer
46 1 20

 

Thanks so much that worked perfectly! 

Is it possible to increase the opacity of the box / make it semi transparent? When I expand the submenu's there is an overlap.

Really appreciate your help!

 

Unknown.png

0 Likes
kaiyacollects
Explorer
46 1 20

Discovered another issue - when I search an item, on the search page, the search bar does not go away and overlaps the products.

How can I hide the search bar on the "searched" page?

 

Unknown.png

dmwwebartisan
Shopify Partner
7324 1729 2305

This is an accepted solution.

@kaiyacollects 

Hide search bar serach templete please add this css code 

@media screen and (max-width: 800px){
.template-search form.input-group.search-bar {
    display: none;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
kaiyacollects
Explorer
46 1 20

Thanks for all the help you constantly provide. 

That worked perfectly!

Can you please help me with the style of the search form?

Natztech
Shopify Partner
1336 371 908

hello @kaiyacollects 

 

@media screen and (max-width: 849px){
.template-search form.input-group.search-bar {
    display: block !important;
}
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
dmwwebartisan
Shopify Partner
7324 1729 2305

This is an accepted solution.

@kaiyacollects 

Add this css  not remove Previous css class

@media screen and (max-width: 800px){
.template-search .drawer form.input-group.search-bar {display:flex; }
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
kaiyacollects
Explorer
46 1 20

Still seems to stay above the text. IS there a way to make the search form scroll with the text?

0 Likes