Search icon in mobile view is not working

Store Design
,
1

in dekstop view I added a search bar and in mobile view I remove the search bar and only display the search icon. Now I want this icon to work anad align with cart icon

niceeee_0-1681719315483.png
niceeee_0-1681719315483.png731×776 240 KB

2

url: https://makerlab-electronics-ph.myshopify.com/

pass: saboten

3

Hey @niceeee

Follow these steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above

Capture.JPG

4

@niceeee add below css

@media screen and (max-width: 767px)
{
input#Search-In-Modal {
    display: block !important;
}
label.field__label {
        display: block !important;
 }
  
    .field {
        visibility: visible !important;
    }
}
5

Hello @niceeee

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media screen and (min-width: 750px){
.search__button .icon {
    color: #fff !important;
}
.search__button {
    top: -15px !important;
}
6

Hi @niceeee

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

@media screen and (max-width: 767px){
.search__button {
    top: -15px !important;
}
.search__button .icon {
    color: #fff !important;
}
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly