Move Mobile Search Bar to Bottom of Drawer - Brooklyn Theme

Solved
dmwwebartisan
Shopify Partner
7310 1727 2303

@kaiyacollects 

Please move search bar top of drawer this is best way .

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

Was just thinking about that. It covers the Home text slightly. Can you help provide CSS to increase top padding from Navigation drawer text please?

dmwwebartisan
Shopify Partner
7310 1727 2303

This is an accepted solution.

@kaiyacollects 

Please add this css class 

@media screen and (max-width: 800px){
.mobile-nav {margin: 25px -15px 0 -15px !important;}
form.input-group.search-bar {margin-top: 10px !important;}
}

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

You are the best!! Thanks so much

0 Likes
kaiyacollects
Explorer
46 1 20

One last question if you dont mind.

Is it possible to make the mobile search form thinner?

And also remove the search form text (Search our store)

dmwwebartisan
Shopify Partner
7310 1727 2303

This is an accepted solution.

@kaiyacollects 

Please add this css class 

@media screen and (max-width: 800px){
.search-bar input::placeholder {
  opacity: 0;
}

.search-bar.input-group .input-group-field {
    height: 35px;
}

.drawer .btn--secondary {
    height: 35px !important;
}

}
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

Worked beautifully!!

The search button padding (and the checkout text padding in the cart drawer are slightly off centered).

Can you provide CSS to fix that alignment please.

0 Likes
dmwwebartisan
Shopify Partner
7310 1727 2303

@kaiyacollects 

Please share screenshot wat do you want!

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 →
0 Likes
kaiyacollects
Explorer
46 1 20

See how the Search icon and Checkout text are lower in the search button. 

Can you also share CSS to change just the color of the search button, I would like it to be black rather than the teal the checkout button uses.

 

Unknown.png

 

 

 

 

Unknown.png

0 Likes
kaiyacollects
Explorer
46 1 20

@dmwwebartisan 

Can you please help me with this last detail?

Cheers!

 

0 Likes