Add a custom icon to mobile view in Dawn

[stikkimorey]

I have added an icon to the header in desktop view by editing header.liquid, but how do I make the icon appear on mobile view?

[kevinkarma55]

First of all, you need to describe the issue better, please share the following :
1. Specify which icon (screenshot may be)

2. preview link of your store

[stikkimorey]

Thank you for taking the time to reply, I will try again to explain.

I am using the Dawn Theme

I have edited header.liquid to add a heart icon just before the cart icon which I am using to link to a wishlist. Finding the place to add that in header.liquid was straightforward, but it only displays the icon on desktop.

Can you tell me where is the code that is used to create the mobile header? I can't see where it is in header.liquid. Is the code in a diferent section?

[stikkimorey]

Also store is here: https://ca9f81-c1.myshopify.com/

password is letmein

[namphan]

Hi @stikkimorey,

Please send the website link, I will check it for you

[namphan]

Hi @stikkimorey,

I checked and it won't really display well on mobile:

I think it would be better if it was displayed in the menu drawer on mobile.

Please let me know, I will check it.

[stikkimorey]

Hi Thanks

I just want the heart icon to appear next to the search icon and cart icon on mobile. How can I best achieve that? I cant see where to edit the mobile header.

Thanks

[namphan]

Hi @stikkimorey,

You want this

Please check and let me know

[stikkimorey]

Hi, yes thats what I want but I dont know which file to edit to achieve it

[namphan · Accepted solution]

Hi @stikkimorey,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 990px) {
    .header-icons {
        display: flex !important;
    }
    .header-icons > * {
        display: none;
    }
    .header-icons .icon.icon-heart {
        display: block;
        width: 44px;
        height: 44px;
    }
}