wordpressにてjsの動きがおかしい（ハンバーガメニュー）

Question

http://portfoolio.wp.xdomain.jp/　上記サイトにて、
id:test
password:testttest にてベーシック認証を解除できます

このサイトにてハンバーガーメニューを設置しました。
https://codepen.io/Chankei/pen/jyyvZM　
のサイトにてコードを使いました。

コードはまず,footer.phpにて、(scriptタグで読み込みました）

<script>

$(function() {
  $('.menu-trigger').click(function() {
      $(this).toggleClass('active');
      $('.g-nav').slideToggle(400);
  });
});

</script>

header.phpには、

<!-- sp版ヘッダー -->
		<div class="sumaho_fixed">
<div class="sp">
<header>
<div class="g-header">
   <nav class="g-nav">
       <ul class="menu">
           <li class="menu__item"><a href="">クリニック紹介</a></li>
           <li class="menu__item"><a href="">当院でできる検査</a></li>
           <li class="menu__item"><a href="">大腸3D-CT検査について</a></li>
           <li class="menu__item"><a href="">院長紹介</a></li>
           <li class="menu__item"><a href="">診療時間/アクセス</a></li>
           <li class="menu__item"><a href="">採用情報</a></li>
           <li class="menu__item"><a href="">診療案内</a></li>
           <li class="menu__item"><a href="">健康診断・各種検診・人間ドック</a></li>
           <li class="menu__item"><a href="">生活習慣病</a></li>
           <li class="menu__item"><a href="">自由診療</a></li>
           <li class="menu__item"><a href="">お知らせ</a></li>
           <li class="menu__item"><a href="">予約フォーム</a></li>
       </ul>
   </nav>
   <div class="sp-menu">
     <div class="flx">
       
       <div class="flx_el">
         <p class="head_tac">
     <img src="images/ロゴ-blue-t-yoko.png" alt="">
   </p>
   </div>
   <div class="flx_el">
     <p class="head_tac">
       <a class="menu-trigger" href="#" onclick="return false;">
           <span></span>
           <span></span>
           <span></span>
       </a>
       </p>
     </div>
     </div>
   </div>
</div>
 </div>

と記述しました。

その後、style.cssに、

.g-header {
  position: relative;
  width: 100%;
  height: 50px;
}

.g-nav {
  display: none;
  position: absolute;
  top: 40px;
  width: 100%;
}

.menu {
  width: 100%;
}

.menu__item {
  background: #56d2c0;
}

.menu__item a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  box-sizsing: border-box;
  border-bottom: 1px solid;
  width: 100%;
  height: 40px;
  line-height: 40px;
}

.head_tac {
  text-align: right;
}

.sp-menu {
  display: block;
  position: absolute;
  width: 100%;
}

.sp-menu .menu-trigger,
.sp-menu .menu-trigger span {
  display: inline-block;
  -webkit-transition: all .4s;
  transition: all .4s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.sp-menu .menu-trigger {
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: 10px;
  margin-top: 5px;
}

.sp-menu .menu-trigger span {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 70%;
  height: 2px;
  background-color: #70c7da;
  border-radius: 5px;
}

.sp-menu .menu-trigger span:nth-of-type(1) {
  top: 5px;
  width: 20px;
}

.sp-menu .menu-trigger span:nth-of-type(2) {
  top: 15px;
  width: 30px;
}

.sp-menu .menu-trigger span:nth-of-type(3) {
  top: 25px;
  width: 20px;
}

.sp-menu .menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
}

.sp-menu .menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}

.sp-menu .menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg);
}

と記述しました。最初html,cssファイルに貼り付けて、試しました。
その時は問題なく表示されました。(codepenと同じコードです）

その後、wordpressにログインし、
phpファイルにコードを貼り付けました。
（上記のheader.phpとfooter.phpとstyle.cssにコードを貼り付けました）

すると挙動が写真のようになりました

（メニューの文字が表示されないなど）

どのようにしたら良いでしょうか。
宜しくお願いします。

Comments

[fumu7]

「html,css　に貼り付けて、試しました」というのは、どういう操作をした事なのですか？
状況がまったく理解できません。『貼り付け』という言葉を、どういう意味で使っているのかも判りません。

[takoyan]

承知しました。すみません。
補足説明を足しました。宜しくお願いします。

[tomtomtomtom]

認証通れませんTT

[takoyan]

すみません。間違っていました。パスワードtestttestでいけると思います。

Answer 1

とりあえず、ざっくりですが、
.menu {
text-align: center;
background-color: rgba(255,255,255,0.5);
transition: .5s ease;
/* -webkit-transform: translateX(-105%); /
/ transform: translateX(-105%); /
}
@media screen and (max-width: 48em)
nav ul {
/ opacity: 0; /
/ visibility: hidden; */
}
これでメニューが見えるかと思います。
あとは微調整かと、、、

如何でしょうか？

Comments

[takoyan]

ありがとうございます。メニューは見れました。助かりました。
ですが、ハンバーガーメニューを押した後のメニュー（クリニック紹介や当院でできる検査など）が、全部表示されなくて、高さをいじっても変わらない感じなんですが、これを全部表示させるにはどうしたら良いでしょうか？質問になってしまい、すみません。宜しくお願いします。

[tomtomtomtom]

うーん
では私なりのざっくりした答えです。
これを参考にご自身の答えを探して下さい^^
詳細はテストしておりませんので、ご了承下さいm(-_-)m

html側 ↓変更
<nav class="g-nav" style="display:inline-block;">

css
.g-nav {
display: none;
position: absolute;
top: 60px;←変更
width: 100%;
}

.menu {
width: 100%;
padding: 10px;←追記
}

.menu__item a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
box-sizsing: border-box;
border-bottom: 1px solid;
width: 100%;
height: 40px;
line-height: 40px;←削除
}

これで一度お試し下さい。