Header and Footer not Displaying Correctly

Hello, I've been working on this site lately. Due my client's necessities I used a decent amount of custom code. There are a few lines in Custom CSS, a few on each page custom code and some code blocks across the pages. There is no code injection and  there is no Javascript used, at all.

I'm attempting to use a hamburger menu that shows on desktop, with code that I got from another forum. The icon is displayed but doesn't work when pressed. Same thing with the footer, on the editor it features a navbar and a button, however when viewing live the button disappears.

When using safe mode everything works just fine. I tried removing each block of code across the website and adding it back and I can't seem to find the issue. If somebody has a solution to this problem I'd be extremely grateful. I can facilitate the custom css code or the code used on each block if needed.

Site URL is: https://semicircle-cone-e395.squarespace.com/

What CSS did you find to use for the hamburger?

Honestly I've leaned towards using one of these plugins from Ghost:

https://www.ghostplugins.com/products/forced-mobile-menu-in-squarespace-71
https://www.ghostplugins.com/products/drop-down-menu

Thank you for you reply.

I don't think that'd solve the issue, since it also affects the footer. If you know of any free alternatives, let me know.

The code is:

.header{
  padding: 2rem 2rem 0 2rem;
}

.header-nav, .header-actions {

  display: none;

}

.header-burger {

  display: flex;

}

.header--menu-open .header-menu {

visibility: visible;

  opacity: 1;

}