Hamburger menu not working in squarespace but works in w3

Im really struggling with some of this code and finding this to be a common issue with squarespace.  Ill test out a code in w3 or codepen and then bring it into squarespace and it doesnt work.    any changes I make to #menu__toggle:checked ~ .menu__box {
doesnt do anything although this is what the menu box should look like when clicked.  Any suggestions?  

This is the code

<div class="hamburger-menu">
  <input id="menu__toggle" type="checkbox" />
  <label class="menu__btn" for="menu__toggle">
    <span></span>
  </label>

  <ul class="menu__box">
    <li><a class="menu__item" href="#">Selected</a></li>
    <li><a class="menu__item" href="#">Resume</a></li>
    <li><a class="menu__item" href="#">Contact</a></li>
    <li><a class="menu__item" href="#">Tools</a></li>
  </ul>
</div>

<style>
#menu__toggle {
  opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
  top: 0;
  transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  left: 0 !important;
}
.menu__btn {
  position: fixed;
  top: 40px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 2;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: grey;
  transition-duration: 0.25s;
}
.menu__btn > span::before {
  content: "";
  top: -8px;
}
.menu__btn > span::after {
  content: "";
  top: 8px;
}
.menu__box {
  display: block;
  position: fixed;
  top: 20px;
  left: 50%;
  width: 120px;
  height: 100%;
  margin: 0;
  padding: 50px 0;
  list-style: none;
  background-color: rgba(0, 0, 0, 0);
  transition-duration: 0.25s;
}
.menu__item {
  display: block;
  padding: 5px 10px;
  color: grey;
  font-family: "lato", sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: 0.25s;
}
.menu__item:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
</style>

Screen Recording 2022-12-07 at 5.10.44 PM.mov

Quote

Ill test out a code in w3 or codepen and then bring it into squarespace and it doesnt work.

codepen and the like are not code repositories specifically for SS code, unless the pen itself indicates that it is specifically SS compatible.

Sometimes it can take substantial work to get code that wasn't designed from the ground up to work with SS, to work, if at all.

It would help to be able to see the original pen to see how the effect is supposed to work.

1 hour ago, creedon said:

codepen and the like are not code repositories specifically for SS code, unless the pen itself indicates that it is specifically SS compatible.

Sometimes it can take substantial work to get code that wasn't designed from the ground up to work with SS, to work, if at all.

It would help to be able to see the original pen to see how the effect is supposed to work.

https://new-website-code.w3spaces.com/saved-from-Tryit-2022-12-07.html

On 12/8/2022 at 6:33 AM, joshuaechevarriadop said:

https://new-website-code.w3spaces.com/saved-from-Tryit-2022-12-07.html

What is your Squarespace site url? We can check easier