How can I replace a search icon with a search bar in the Judasona theme?

Store Design
1

Hello!

I am using the Judasona theme, and It has a search icon like a magnifying glass already. But I would like to add a search bar instead of the icon.

Is there any way to do this?

Also, changing the cart icon picture, the icons for whichever reason are a tad blurry and I plan on changing them. Thank you. Again I’m using the judasona theme.

My store url is www.littlelullabuy.com

1 Like
2

@Ctmph2022

yes, please confirm this look

KetanKumar_0-1659203656360.png
KetanKumar_0-1659203656360.png1920×1080 254 KB

3

Yeah! Like that! Although I know that some websites have the search bar with the rounded edges not the square shape, I’d want the rounded edges over the two but yes that works.

4

@Ctmph2022

thanks for confirm please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/style.css ->paste below code at the bottom of the file.
@media (min-width: 992px) {
.header-search-wrap {
    box-shadow: none;
    top: -10px;
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.header-search-wrap form {
    border-radius: 100px;
}
}
5 
@media (min-width: 992px) {
.header-search-wrap {
    box-shadow: none;
    top: -10px;
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.header-search-wrap form {
    border-radius: 100px;
}
}

Is there a way to make the search bar visible without clicking the magnifying glass first on the mobile version?

I also have another question but I’ll make another post for that