Making the Navigation Icon Disappear when you click it and reappear when you close the navigation

[ByronPratt]

https://shopevergifts.com/products/magic-writing-workbook

Above is a link to my website. I am using the craft theme. So I went ahead and added a different svg file inside "icon-hamburger.liquid" because I didn't like how my navigation icon was appearing.

Since I have made that change, I now have this issue where when you open the navigation on mobile, an X appears over the navigation icon.

My end goal is to only have the X Icon when the navigation is opened, and when the navigation is closed again the navigation hamburger icon will appear.

But I really don't want to have to revert back to my old hamburger icon.

If anybody knows the solution to this It would be much appreciated if you would let me know, Thanks!

[thirtycoders]

Hello @ByronPratt,

You can try this code by following these steps:

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

Step 2: Search file base.css

Step 3: Paste the below code at the bottom of the file -> Save

.header__icon .icon {
    height: 6rem !important;
    width: 3rem !important;
}

.header__icon--menu .icon {
    margin-right: 12px !important;
    background: #ececec;
}

Thanks!