CSS transition not being applied consistently

I'm attempting to adapt this CSS menu so that it slides from the top of the page when the hamburger is clicked. It slides in as expected on one of the four pages (Page Three in the gif below), but simply appears in place on the other three. However it slides up as expected on menu close.

It gets weird though -- I tried to use Pesticide (the Chrome extension) to look at the element, and when Pesticide is triggered, it works just fine on all of the pages!

Also I'm using Jekyll but not sure that matters. Any ideas? I'm stumped.

The header component:

<header>
  <div id="menu-wrapper">
    <a href="/">
      <img src="logo.png" />
    </a>
    <div id="menuToggle">

      <input type="checkbox" onClick="toggleMenu();" />

      <div id="hamburger">
        <span></span>
        <span></span>
        <span></span>
      </div>

      <ul id="menu" class="uppercase headline">
        <a href="/one"><li>One</li></a>
        <a href="/two"><li>Two</li></a>
        <a href="/three"><li>Three</li></a>
      </ul>
    </div>
  </div>
</header>

The menu sass:

/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */

header {
  width: 100%;
  height: auto;
  max-width: 100%;
  position: absolute;
  top: 0;
}

div#menu-wrapper {
  position: absolute;
  width: 100%;
  height: 14rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 0 2rem;
  background: rgba(0, 0, 0, 0);

  img#logo {
    height: 12rem;
    position: absolute;
    top: 2rem;
    left: 3rem;
  }

  &.visible {
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  }
}

div#menuToggle {
  position: absolute;
  top: 5rem;
  right: 5rem;
  display: flex;
  flex-direction: row-reverse;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;

  input {
    cursor: pointer;
    position: absolute;
    height: 3.5rem;
    width: 3.5rem;
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */

    -webkit-touch-callout: none;
  }
}

// * hamburger slices
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;

  background: white;
  border-radius: 3px;

  z-index: 1;

  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;

  &:first-child {
    transform-origin: 0% 0%;
  }
  &:nth-last-child(2) {
    transform-origin: 0% 100%;
  }
}

/* 
  * Transform all the slices of hamburger
  * into a crossmark.
  */
#menuToggle input:checked ~ div#hamburger > span:first-of-type {
  opacity: 1;
  transform: rotate(45deg) translate(0px, -5px);
}

/*
  * But let's hide the middle one.
  */
#menuToggle input:checked ~ div#hamburger > span:nth-of-type(2) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
  * Ohyeah and the last one should go the other direction
  */
#menuToggle input:checked ~ div#hamburger > span:last-of-type {
  transform: rotate(-45deg) translate(0, -1px);
}

ul#menu {
  position: relative;
  display: flex;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  transform: translate(0, -100rem);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

#menu li {
  font-size: 2.5rem;
  color: white;
  white-space: nowrap;
  margin-right: 4rem;
}

/*
  * And let's slide it in from the top
  */
#menuToggle input:checked ~ ul {
  transform: none;
}