ハンバーガーメニューの、クリック後のリストが現れません

Question

前提・実現したいこと

参考サイト

参考サイトのようにハンバーガーメニューが開いたり閉じたりしたいのですが、(参考サイトと違う点は自分が設定しているのは右から開閉)メニュー自身は開閉しているのですが、リストの文字が出てきてくれません。
これを参考サイトのように出てくるようにしたいです。

検証ツールで見てみると、クリックした後はclikedクラスはついているのですが、画像のようにulやliは何故か上に行っています。

また、sassで書いているのですが、.clickedが別で書いてしまっているので、他に良い書き方などがあれば教えていただけると幸いです。

発生している問題・エラーメッセージ

無し

該当のソースコード

<div class="header-sp-nav">
        <ul>
          <li class="header-sp-feature"><a href="#threeFeature">特徴</a></li>
          <li class="header-sp-price"><a href="#price">価格</a></li>
          <li class="header-sp-contact"><a href="#contact">お問い合わせ</a></li>
        </ul>
      </div>
      <div class="ham" id="ham">
        <span class="ham-line ham-line1"></span>
        <span class="ham-line ham-line2"></span>
        <span class="ham-line ham-line3"></span>
      </div>

.header-sp-nav {
      display: none;

      @include sspc {
        display: block;
        width: 300px;
        height: 300px;
        position: fixed;
        right: -400px;
        transition: all 0.3s;
        background-color: aqua;
      }
    }

    .clicked.header-sp-nav {

      @include sspc {
        right: 0px;
      }
    }

    @include sspc {
      .ham {
        position: relative;
        width: 50px;
        height: 50px;
        cursor: pointer;

        .ham-line {
          position: absolute;
          right: 5px;
          width: 100%;
          height: 3px;
          background-color: #333;
          transition: all 0.3s;
        }

        .ham-line1 {
          top: 5px;
        }


        .ham-line2 {
          top: 22px;
          width: 80%;
        }

        .ham-line3 {
          top: 40px;
          width: 60%;
        }
      }
    }

    @include sspc {

      .clicked .ham-line1 {
        transform: rotate(45deg);
        top: 20px;
      }

      .clicked .ham-line2 {
        width: 0;
        transition: width 0s;
      }

      .clicked .ham-line3 {
        transform: rotate(-45deg);
        top: 20px;
        width: 100%;
      }
    }

$('#ham').on('click',function() {
    $('#ham').toggleClass('clicked');
    $('.header-sp-nav').toggleClass('clicked');
  });
});

試したこと

重ね合わせ順の問題かと思い、下記のように追加しましたが変わりませんでした。

.clicked.header-sp-nav {

     .header-sp-feature {
       z-index: 2;
     }
}

補足情報（FW/ツールのバージョンなど）

jQuery,sassで書いています。

Answer 1

参考サイト

参考サイト

上記を参考に自己解決できました。