How can I add a search icon to my mobile site?

Store Design
, ,
1

Hello I would like to add a search icon to the mobile version of the site: https://walterbaker.com/

Is it possible to put on between the logo and cart/bag icon? Currently its in the sidebar menu. Any help would be greatly appreciated

image002.png
image002.png1125×2436 466 KB

2

Hi @Tkirschenheiter,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.scss or theme.scss.liquid

Step 3: Paste the below code at bottom of the file → Save

@media(max-width:767px){
.Header__FlexItem.Header__FlexItem--fill {
    display: flex !important;
}
.Header__SecondaryNav{
transform: translateX(-10px) !important;
}
#section-header ul.HorizontalList.HorizontalList--spacingLoose.hidden-pocket.hidden-lap li{
 display:none !important
}
#section-header ul.HorizontalList.HorizontalList--spacingLoose.hidden-pocket.hidden-lap,
#section-header ul.HorizontalList.HorizontalList--spacingLoose.hidden-pocket.hidden-lap li:first-child{
display: block !important;
}

}

PageFlyVictor_0-1679548053804.png
PageFlyVictor_0-1679548053804.png742×1328 207 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly