Would like a burger menu for desktop - and the shop icon to be visible.

Site URL: https://www.kristamcrae.com/

Hi there, 

I am building a site and would like the navigation to be a burger however when I place the code in it hides the custom cart (treasure chest) icon. 

Code from a tutorial: 
 

.header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible;}

.header .header-actions-action--cart svg {

  stroke:transparent!important

}

This does work but it also hide the cart logo which I do not want. 

Just wondering how I make the cart icon (treasure chest) visible? 

Any help would be much appreciated.

Thank you.

Remove this line

 .header-actions {display:none}

Thank you Tuan this does work however it leaves the "Treasure Chest" text next to the burger. 

I want the Treasure chest removed and leave the icon to the right. 

See image.

Any help would be much appreciated.

I have my navigation sorted for the mobile which includes the cart icon (treasure chest) on the right. I would like this set up reflected in my desktop version. The cart icon (treasure chest) is not showing. I would like it to show. 

See images attached. 

This is my css: 

.header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible;}
.header .header-burger{display:flex}
.header-nav, .header-actions {display:none}

.header--menu-open .header-menu {
opacity: 1; visibility: visible;
width: 75%; 
margin-right: 50%;
box-shadow: -5px 5px 10px #000}

I also used code to replace the standard cart icon with my own icon: 

 

.header .header-actions-action--cart svg {

  stroke:transparent!important

}
.header .header-actions-action--cart {
background-image: url(https://static1.squarespace.com/static/622eb7bbc5cdba1674350529/t/634b803da1ccbf4e187e2020/1665892413588/Cart_1.png);
background-size: 25px 25px;
background-repeat: no-repeat;
}