dawn theme - add icon before an menu item

[xnyjyh]

How can i add an icon to a menu item link? Thanks!

"ICON - MENU ITEM LINK"

[BSSCommerce-HDL · Accepted solution]

Hi @xnyjyh, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </body> tag:

<script>
let philanthropy_link = document.querySelector('#HeaderMenu-howah-philanthropy');
if(philanthropy_link) {
   philanthropy_link.insertAdjacentHTML('afterbegin', `<img src="https://cdn.shopify.com/s/files/1/0564/3046/1030/files/donation.svg?v=1725669614" width="34" height="34" style="margin-right: 5px">`)
}
</script>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @xnyjyh, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
a#HeaderMenu-howah-philanthropy {
    padding-top: 8px !important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL]

@xnyjyh, Can you kindly share the details of your problem (screenshot) with us? We will check it and suggest you a solution if possible.

[BSSCommerce-HDL · Accepted solution]

Hi @xnyjyh, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </body> tag:

<script>
let philanthropy_link = document.querySelector('#HeaderMenu-howah-philanthropy');
if(philanthropy_link) {
   philanthropy_link.insertAdjacentHTML('afterbegin', `<img src="https://cdn.shopify.com/s/files/1/0564/3046/1030/files/donation.svg?v=1725669614" width="34" height="34" style="margin-right: 5px">`)
}
</script>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @xnyjyh, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
a#HeaderMenu-howah-philanthropy {
    padding-top: 8px !important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[xnyjyh]

You da bomb as usual! Thanks so much! 🙂

[BSSCommerce-HDL]

@xnyjyh, No problem. Glad to help you 😍

[xnyjyh]

Just realized it did not do this to the mobile menu. how can I add it to that?

[BSSCommerce-HDL]

Hi @xnyjyh, You want the icon to do this right?

[xnyjyh]

correct, that one

[xnyjyh]

Alos, no idea why, but my mobile menu scrolls sideways when open and the main content under page scrolls too. is there a way to fix that too? like so its just fixed and nothing scrolls at all when menu open?

[BSSCommerce-HDL]

Hi @xnyjyh, For no scrolls at all when menu open

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
body:has(.menu-drawer-container.menu-opening) {
    overflow-y: hidden ! important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[xnyjyh]

kinda worked, still moves sideways and upwards, but when you touch the menu to move it, the menu snaps into fixed state after. 

[BSSCommerce-HDL]

@xnyjyh, I don't quite understand what you mean.

[BSSCommerce-HDL · Accepted solution]

Hi @xnyjyh, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </body> tag:

<script>
let philanthropy_drawer_link = document.querySelector('#HeaderDrawer-howah-philanthropy');
if(philanthropy_drawer_link) {
   philanthropy_drawer_link.insertAdjacentHTML('afterbegin', `<img src="https://cdn.shopify.com/s/files/1/0564/3046/1030/files/donation.svg?v=1725669614" width="34" height="34" style="margin-right: 5px">`)
}
</script>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[xnyjyh]

Works great, thanks!

[JGTQM2018]

Hi @BSSCommerce-HDL 

I tried your code and adapted to my menu id but now the text of the menu is on the far left, how do i adjust it and how do i make it appear on mobile? 

 

[BSSCommerce-HDL]

Hi @JGTQM2018, Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

[JGTQM2018]

 Hi @BSSCommerce-HDL , thank for the reply!

Of course, https://aiwa-int.com.au/, I've removed the code for now, please let me know how i can fix it 🙂 

[BSSCommerce-HDL]

Hi @JGTQM2018, Pls add back the previous code. I added more with this code: 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.header__submenu .header__menu-item {
    justify-content: unset !important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[JGTQM2018]

@BSSCommerce-HDL  Thank you for your reply, I really appreciate it !

I've re added the code but the icons only show on menu type " Mega menu" and I want to use it as menu type Drawer, also its not showing up in mobile either menu type ? 😞 

Thank you for your help! 

[JGTQM2018]

Hi @BSSCommerce-HDL just following up if you have a minute

I've re added the code but the icons only show on menu type " Mega menu" on desktop and not on mobile.

Thank you for you help.