ハンバーガーメニューを実装したいです。

Question

前提・実現したいこと

現在ポートフォリオを作成中で、ハンバーガーメニューを入れようとしています。

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

ハンバーガーメニューの表示までは出来たのですが、問題が2つ起きて止まっています。
①ページ内リンクを付けたいのに、リンクを付けてもリンク化されない。
②現在左上に表示されているハンバーガーメニューを、右上に移動したいのですが、そうすると中身が表示されなくなってしまいました。

該当のソースコード

html

 <span class="nav_toggle">
        <i></i>
        <i></i>
        <i></i>
    </span>
    <nav class="nav">
        <ul class="nav_menu_ul">
            <li class="nav_menu_li"><a href="#profile">About</a></li>
            <li class="nav_menu_li"><a href="#skill">Skill</a></li>
            <li class="nav_menu_li"><a href="#price">Price</a></li>
            <li class="nav_menu_li"><a href="#contact">Contact</a></li>
        </ul>
    </nav>

css

/* hamburger menu */
.nav_toggle {
  display: block;
  position: relative;
  width: 1.75rem;
  height: 1.5rem;
}
.nav_toggle i {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #333;
  position: absolute;
  transition: transform .5s, opacity .5s;
}
.nav_toggle i:nth-child(1) {
  top: 0;
}
.nav_toggle i:nth-child(2) {
  top: 0;
  bottom: 0;
  margin: auto;
}
.nav_toggle i:nth-child(3) {
  bottom: 0;
}
.nav_toggle.show i:nth-child(1) {
  transform: translateY(10px) rotate(-45deg);
}
.nav_toggle.show i:nth-child(2) {
  opacity: 0;
}
.nav_toggle.show i:nth-child(3) {
  transform: translateY(-12px) rotate(45deg);
}
.nav {
  position: fixed;
  top: 3rem;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s;
}
.nav.show {
  opacity: 1;
  visibility: visible;
}
.nav_menu_li a{
  color:black;
  text-decoration: none;
  cursor: pointer;
}

jQuery

$('.nav_toggle').on('click', function () {
    $('.nav_toggle, .nav').toggleClass('show');
});

試したこと

ハンバーガーメニューを、marginを変えたりtop,rightの位置を変更したのですが、そうすると中身が表示されなくなってしまいます。
どなたか、ご教示願います。

Comments

[kei344]

「発生している問題」の部分はコードでないので、コードブロックで囲む必要はありません。PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

[kei344]

「Slick内」とありますが、関係あるのでしょうか。もし関係があるのであれば、そこを含めたコードを提示されたほうが良いと思います。

[T012]

ご返信ありがとうございます。
おそらくは関係ないので、訂正しました。
ご教示いただければ幸いです。

[kei344]

提示のコードだけだと https://jsfiddle.net/Lkhz4w5o/ リンクは効いているようです。右にも置けます。 https://jsfiddle.net/Lkhz4w5o/1/

[kei344]

もしかして、メニューの下にあるリンクが押せないということでしょうか。

[Lhankor_Mhy]

『リンクを付けてもリンク化されない』とは具体的には何が起きていますか？　どのような現象を目撃することによって「リンク化されない」という感想を持ったのでしょうか？

[T012]

結局、ハンバーガーメニューを入れないようにしました。
ご対応頂いた方々は、ありがとうございました。

[kei344]

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

[Lhankor_Mhy]

そうでしたか。自己解決の手続きをお願いします。
https://teratail.com/help#resolve-myself

プログラミングの勉強がんばってくださいね。
↓ツイートを拝見しました。フリーランスエンジニアとしてのご活躍をお祈りします。
https://twitter.com/Takumi01262

[T012]

ご丁寧に、ありがとうございます。
またどうぞ、よろしくお願いします。

Answer 1

いろんな方に見て頂きましたが、結局実装しないようにしました。
ご協力いただいた方々、ありがとうございます。