Problem with custom close and hamburger menu icons

Store Design
,
1

Hello, i have managed to change the close icon and hamburger menu icon by adding the svg codes to each file.

Code added to icon-close.liquid:

Code added to icon-hamburger.liquid:

They are right size. They also have the right placement if I remove one and keep one, but when both code is in use they for some reason show both at the same time next to each other.

I want it to show the hamburger menu only and when I press the hamburger icon I only want the close icon showing. Been trying to achive this but since i’m only a beginner I can’t get it right.

Store url: https://23bc4a.myshopify.com/

Would really appreciate if anyone shared the solution.

Thanks beforehand,

Leon

2

Hi @Leonpojen

Please follow these steps:

  1. Add a class to your 2 icons to distinguish them:

close-icons:

hamburger:
  1. Default CSS so that when entering the close-icon page, it will be hidden in the file base.css add the following code at the end of the file:
.close-icon {
  display: none;
}
  1. Add javascript to make the hamburger hide when clicking it and show the close-icon and vice versa.

You can Add the following code at the end of the body tag in the theme.liquid file:

We hope that this can help you.

3

@BSS-Commerce

Hello and thanks for the help, this works but only after i click the close icon, and when i use a link from menu drawer both icons show again, how can i solve this issue?

4

Hi @Leonpojen

We have checked and it is working properly when clicked but when we visit the page, both icons are showing. This may be because you missed step 2 in our guide. Please try to add it again.

Please go to Edit code as we guided, find the file “base.css” and add the following code at the end of the file. This will make the icon-close invisible when you enter the page.

.close-icon {
  display: none;
}

We hope that this can help you.

5

Hi again, for some reason it now doesn’t work, It did work before but I have modified a lot since, do you know why?

Site url is new: www.arceyworldwide.com

password: arcey