Add home icon to main mobile menu

Loz86
Pathfinder
91 7 14
Anyone have any or can provide any custom liquid/CSS snippet to add a home icon (with link) to the top left of the mobile main menu in Halo theme?
 
Like this

 

Loz86_0-1703683114168.png

 

Replies 10 (10)

Jasoliya
Shopify Expert
4807 621 1213

Hi @Loz86 

Send  your store url so we can check and provide possible solution 

Best regard 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel
Want to get Free review and advice for sale on store ?? just text me here
Loz86
Pathfinder
91 7 14

Hi @Jasoliya 

 

Thanks for the reply.

 

I'm currently working on an unpublished theme at the moment.

 

The url is: https://y1hz4akx21bmfaxh-78729543967.shopifypreview.com

Jasoliya
Shopify Expert
4807 621 1213

Try to add this code, this is not proper solution but its fast solution for you

1. Go to Online Store->Theme->Edit code
2. Asset->base.css -> paste bellow code in bottom of file

.cd_a{padding-left: 19px; margin-top: 12px; display: block; max-width: 50px; padding-bottom: 7px;}
.cd_a img{width:100%;}
.halo-sidebar-wrapper .list-menu.list-menu--inline{border-top: 1px solid #eee;}

 

3.  now add this Js code in theme.liqude file just belfore </body>

document.querySelector('.list-menu--inline').insertAdjacentHTML('beforebegin', '<a href="/" class="cd_a"><img src="https://cdn-icons-png.flaticon.com/512/25/25694.png" class="cd_img"></a>');

Note: you can change image to your 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel
Want to get Free review and advice for sale on store ?? just text me here
Loz86
Pathfinder
91 7 14

Got this error in theme.liquid snippet

"Missing width and height attributes on img tag"

Loz86_0-1703687444419.png

 

I've added these missing attributes with this

 

document.querySelector('.list-menu--inline').insertAdjacentHTML('beforebegin', '<a href="/" class="cd_a"><img src="https://cdn.shopify.com/s/files/1/0787/2954/3967/files/Home.png?v=1703687100" class="cd_img" width="32" height="32"></a>');

 


However the icon isn't showing frontend

Jasoliya
Shopify Expert
4807 621 1213

 

try to add this 

<script>
document.querySelector('.site-nav-mobile .list-menu.list-menu--inline.justify-center').insertAdjacentHTML('beforebegin', '<a href="/" class="cd_a"><img src="https://cdn.shopify.com/s/files/1/0787/2954/3967/files/Home.png?v=1703687100" class="cd_img" width="32" height="32"></a>');
</script>
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel
Want to get Free review and advice for sale on store ?? just text me here
Loz86
Pathfinder
91 7 14

Still no joy unfortunately  😔

Jasoliya
Shopify Expert
4807 621 1213

add me staff (jasoliyabrijesh123@gmail.com) i will check, 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel
Want to get Free review and advice for sale on store ?? just text me here
Loz86
Pathfinder
91 7 14

I've managed to do it now thanks anyway.

techlyser_web
Shopify Partner
1095 210 223

You want to replace this icon?

                                                         

techlyser_web_0-1703688998144.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Loz86
Pathfinder
91 7 14

No, it was adding a home icon inside the hamburger menu, I've managed to do it now thanks anyway.