Disappearing hamburger icon when full screen menu is open (desktop)

Hi there! 

I'm wondering if I could get some help - my hamburger icon is disappearing when I open my full screen menu. I used this tutorial to create the menu: https://community.elfsight.com/t/squarespace-custom-fullscreen-burger-menu/18276 but it seems like the open menu covers the exit symbol when opened. I'd like the exit icon to be on top of the open full screen menu.

my site is: https://grouse-pepper-fl3e.squarespace.com/home
PW: 123

Current CSS: 

//show burger icon//
@media screen and (min-width:768px) {
.header-burger {
    display: flex !important;
    justify-content: flex-start !important;
  z-index: 1 !important;
}
.header-nav {
    display: none;
}
.header-actions-action {
    display: none !important;
}
.header .header-announcement-bar-wrapper {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
}
}
@media screen and (min-width:768px) {
    /* Fix footer invisible behind page content */
footer.sections {
     z-index: 9999999 !important;
 }
/* change footer 2 sections to 100% height and 50% width */
footer.sections section:nth-child(3), footer.sections section:nth-child(2) {
    width: 50%;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    left: 0;
}
footer.sections section:nth-child(3) {
    left: 0;
}
/* move footer section 2 to right 50% */
footer.sections section:nth-child(2) {
    left: 50%;
    right: 0;
}
/* disable scroll when burger menu is open */
.header-burger--open body {
    overflow: hidden;
}
/* effect on 2 sections when click burger menu */
  body footer.sections section:nth-child(3), body footer.sections section:nth-child(2) {
    transition: transform 1.2s ease;
      top: 32px !important;
}
body footer.sections section:nth-child(3) {
    transform: translateY(-150%);
    transition: transform 0.75s ease;
}
body footer.sections section:nth-child(2) {
    transform: translateY(150%);
    transition: transform 0.75s ease;
}

body.header--menu-open footer.sections section:nth-child(3) {
    transform: translateY(-0%);
    transition: transform 0.75s ease;
}

body.header--menu-open footer.sections section:nth-child(2) {
    transform: translateY(0%);
    transition: transform 0.75s ease;
}
}

Any help would be much appreciated thank you!!

7 hours ago, daniellemusarra said:

Hi there! 

I'm wondering if I could get some help - my hamburger icon is disappearing when I open my full screen menu. I used this tutorial to create the menu: https://community.elfsight.com/t/squarespace-custom-fullscreen-burger-menu/18276 but it seems like the open menu covers the exit symbol when opened. I'd like the exit icon to be on top of the open full screen menu.

my site is: https://grouse-pepper-fl3e.squarespace.com/home
PW: 123

Current CSS: 

//show burger icon//
@media screen and (min-width:768px) {
.header-burger {
    display: flex !important;
    justify-content: flex-start !important;
  z-index: 1 !important;
}
.header-nav {
    display: none;
}
.header-actions-action {
    display: none !important;
}
.header .header-announcement-bar-wrapper {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
}
}
@media screen and (min-width:768px) {
    /* Fix footer invisible behind page content */
footer.sections {
     z-index: 9999999 !important;
 }
/* change footer 2 sections to 100% height and 50% width */
footer.sections section:nth-child(3), footer.sections section:nth-child(2) {
    width: 50%;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    left: 0;
}
footer.sections section:nth-child(3) {
    left: 0;
}
/* move footer section 2 to right 50% */
footer.sections section:nth-child(2) {
    left: 50%;
    right: 0;
}
/* disable scroll when burger menu is open */
.header-burger--open body {
    overflow: hidden;
}
/* effect on 2 sections when click burger menu */
  body footer.sections section:nth-child(3), body footer.sections section:nth-child(2) {
    transition: transform 1.2s ease;
      top: 32px !important;
}
body footer.sections section:nth-child(3) {
    transform: translateY(-150%);
    transition: transform 0.75s ease;
}
body footer.sections section:nth-child(2) {
    transform: translateY(150%);
    transition: transform 0.75s ease;
}

body.header--menu-open footer.sections section:nth-child(3) {
    transform: translateY(-0%);
    transition: transform 0.75s ease;
}

body.header--menu-open footer.sections section:nth-child(2) {
    transform: translateY(0%);
    transition: transform 0.75s ease;
}
}

Any help would be much appreciated thank you!!

Your footer is set with 9999999 which is over than header

Quote

 z-index: 9999999 !important

Try adding the following Custom CSS to make it visible again

#header {
  z-index: 99999999 !important
}

Let me know how it works

13 hours ago, Beyondspace said:

Your footer is set with 9999999 which is over than header

Try adding the following Custom CSS to make it visible again

#header {
  z-index: 99999999 !important
}

Let me know how it works

Thank you!! This worked great. I'm now wondering if there's a way to remove the logo when the menu pops up and only have the cross? Is this possible?

Appreciate your help!

Amazing thank you!!