Different header icons on mobile - Dawn theme

[Melodie1990]

Hi can anyone please help me with having different icons on my header to the ones I currently have on desktop please?

This is it on desktop: 

And would like something similar to this on mobile if possible please: 

Many thanks 🙂 My store preview link is: https://adr2bzv752u1vpcu-73804087584.shopifypreview.com

[Melodie1990]

Do I just copy and paste the relevant code from base.css and theme.liquid? Or is there another way for me to share sorry? 

[sahilsharma9515]

Hi @Melodie1990 Thanks for the URL, You need to accomplish it with the help of custom code, I can provide you the base code and you can take help of the base code to achieve the same on your site

<div class="header-search-icons">
    <img src="path/to/desktop-search-icon.png" class="search-icon-desktop" alt="Search Icon for Desktop">
    <img src="path/to/mobile-search-icon.png" class="search-icon-mobile" alt="Search Icon for Mobile">
</div>

CSS Code should look like this:

/* Hide the mobile icon by default */
.search-icon-mobile {
    display: none;
}

/* Show desktop icon only on larger screens */
@media (min-width: 768px) {
    .search-icon-desktop {
        display: inline;
    }
    .search-icon-mobile {
        display: none;
    }
}

/* Show mobile icon only on smaller screens */
@media (max-width: 767px) {
    .search-icon-desktop {
        display: none;
    }
    .search-icon-mobile {
        display: inline;
    }
}

Please Note: This is the example or base code you need to update the code according to your store and needs.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[mrashid]

@Melodie1990 

Hello! Yes, it’s possible to customize your header icons separately for desktop. However, this typically requires code adjustments within the theme files. If you’re open to collaborating or can share temporary access, I’d be glad to help set this up for you! Let me know if you'd like to proceed.

[mrashid]

@Melodie1990 something is wrong on your product page