How to add a home icon to the main mobile menu in Halo theme?

How to add a home icon to the main mobile menu in Halo theme?

Loz86
Pathfinder
94 7 19
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 Partner
4823 625 1225

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 or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Loz86
Pathfinder
94 7 19

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 Partner
4823 625 1225

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 or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Loz86
Pathfinder
94 7 19

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 Partner
4823 625 1225

 

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 or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Loz86
Pathfinder
94 7 19

Still no joy unfortunately  😔

Jasoliya
Shopify Partner
4823 625 1225

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 or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Loz86
Pathfinder
94 7 19

I've managed to do it now thanks anyway.

niraj_patel
Shopify Partner
2391 516 514

You want to replace this icon?

                                                         

techlyser_web_0-1703688998144.png

 

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
94 7 19

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