Custom menu close icon

sirensiren
Excursionist
38 0 8

Hi! I succesfully replaced the default hamburger icon with a custom one, and I want to do the same with the close menu icon that appears on mobile. 

 

Unfortunately, this process is a little bit more complicated, because there are two files for this icon, the names and the codes of which I am writing below.

 

Icon-close.liquid

 

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" fill="none" viewBox="0 0 18 17">

  <path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor">

</svg>

 

Icon-close-small.liquid

 

<svg  aria-hidden="true" focusable="false" role="presentation" width="12" height="13" class="icon icon-close-small" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">

  <path d="M8.48627 9.32917L2.82849 3.67098" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>

  <path d="M2.88539 9.38504L8.42932 3.61524" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>

  </svg>

 

The URL of my custom icon is the following: https://cdn.shopify.com/s/files/1/0609/7302/3284/files/40_x_40_px_1.svg?v=1696601410

 

Can someone tell me how to go about it? I have already experimented with it but I didn't have the results I wanted.

 

After succesfully changing the icon, I will also have to move it to a different position because now the default close icon is exactly on top of my custom hamburger icon.

 

I can provide shop URL and password in private message.

 

Thank you!

 

close-icon-on-top-of-hamburger-icon.png

Replies 4 (4)
shreyhweb
Shopify Partner
598 103 108

@sirensiren 

 

Hello we will help you about it. please let us know where to want the close icon?

And also give us the store URL and password

 

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
sirensiren
Excursionist
38 0 8

Hello, I sent you a private message! Thank you!

queenjuni
New Member
8 0 0

can you please help me with this its happening to me as well my store is queenjuni.com

shreyhweb
Shopify Partner
598 103 108

Sure, please let us know which issue facing you on your store?

 

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com