Search icon not visible

[sagarweb]

I just added the search icon to my header but it is not showing in the header

[sagarweb]

@Mustafa_Ali https://intelliplay.in/ please help

[Mustafa_Ali]

i don’t think so you add a search icon if you feel comfortable then plz share screen short so i can help you

[topnewyork]

Hi @sagarweb ,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media screen and (min-width: 1024px) {
.m-header__mobile {
    display: block !important;
}

.m-logo.m-logo--mobile.m\:w-6\/12.m\:justify-center.m-logo--has-image {
    display: none !important;
}

.m-header__inner {
    width: fit-content !important;
}

header.m-header__mobile.container-fluid.m\:flex.m\:items-center {
    position: absolute;
    top: 25px;
    z-index: 99;
    right: -33px !important;
    width: fit-content !important;
}

.m-header .m-cart-icon-bubble {
    display: none !important;
}

.m-hamburger-box{
    display: none !important;
}
}

Thanks!

[sagarweb]

still same issue bro

[sagarweb]

The icon is showing on the backend but not on the frontend

[sagarweb]

i have added you code

[topnewyork]

Please add this code.

@media screen and (min-width: 769px) {
    .m-header__mobile {
        display: block !important;
    }

    .m-logo.m-logo--mobile.m\:w-6\/12.m\:justify-center.m-logo--has-image {
        display: none !important;
    }

    .m-header__inner {
        width: fit-content !important;
    }

    header.m-header__mobile.container-fluid.m\:flex.m\:items-center {
        position: absolute !important;
        top: 25px !important;
        z-index: 99 !important;
        right: -33px !important;
        width: fit-content !important;
    }

    .m-header .m-cart-icon-bubble {
        display: none !important;
    }

    .m-hamburger-box {
        display: none !important;
    }
}

Thanks!

[Nicola3]

Hi @sagarweb

To better understand your said situation about favicon, I have searched your website on Google and it shows like this below:

I think the reason why you fail to see the search icon properly is due to the size of favicon you added from backend, which is too small and not so obvious. You can upload a larger size favicon and try again. Also, a kind reminder here that your favicon must be a square and at least 8x8px, as it is the minimum size requirement and it is recommended for you to use a favicon larger than 48x48px, so that it will be more obvious and valid in search results.

I also believe your store must have further contents need to be optimized. You can consider using this tool I used on my store also to further improve page contents, and I can feel that it works for you also in some ways. Thank you!

[sagarweb]

Thanks for giving this code. With the help of this code the search icon is visible but now the menu items are shifted to left and the header is not visible at the top in the Shopify editor. I am giving the screenshot below for your reference.