ワードプレスでレスポンシブサイトを作ったがハンバーガーメニューが表示されない

前提・実現したいこと

ワードプレスのtwentyseventeenの子テーマでレスポンシブサイトを作り、
スマホ用として確認でブラウザを小さくすると、
あるはずのハンバーガーメニューがでてこないです。

該当のソースコード

HTML

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" />
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
	<header class="mainmenu">
	<menu>
		  <!--メニューリスト-->
  <div id="drawer">
<input id="input" type="checkbox" class="unshown　menuinput">
  		<label id="open" for="input"><span></span></label>
  		<label class="unshown" id="close" for="input"></label>
    <div id="menu-content">
		<ul>
		<li class="menulistright"><a href="#"><span class="menulistweight ">TikTok</span></a></li>
		<li class="menulist"><a href="#"><span class="menulistweight ">TVCM＆Web Movie</span></a></li>
		<li class="menulist"><a href="#"><span class="menulistweight ">Graphic</span></a></li>
		<li class="menulist"><a href="#"><span class="menulistweight ">Products</span></a></li>
		</ul>
	  </div>
		</div>
		<!--メニューリスト-->
		</menu>
	</header>
</body>
</html>

CSS

* {
	margin:0;
}

input {
	display:none;
	}

menu {
	margin:0;
	padding:0;
}

ul {
	padding: 0;
}

menu a:hover {
	opacity:0.4;
}

.menulist {
	font-size:150%;
	margin-left:2%;
}

.menulistright {
	font-size:150%;
}

.menulistweight {
	font-weight:700;
}

.menulistright a {
	color:#fff;
	display:block;
	width:100%;
}

.menulist a {
	color:#fff;
	display:block;
	width:100%;
}

a {
	text-decoration:none;
}


body {
	background-image: url(../twentyseventeen-child/img/bg.png);
	width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
   background-attachment: fixed;
   background-position: center center;
}

@media screen and (min-width:769px){

.mainmenu {
	background: #4cade0;
	border-bottom: 1px solid #fff;
	padding:2%;
}

menu ul {
    display: flex;
}

li {
	list-style:none;
}

}

@media screen and (max-width:768px) {
	
   #drawer {
    position: relative;
    background: #4cade0;
    padding: 1%;
	height:33px; 
	margin: 0 0 0 auto;
  　border-radius: 50%;
   padding-top:5%;
	padding-bottom:5%;
  }
	
 .menuinput {
		transform: scale(3,3);
	}

  #open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
	  cursor: pointer;
	  
  }
  #open span, #open span::before, #open span::after {
    position: absolute;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: white;
    display: block;
    content: "";
	  
  }
  #open span::before {
    bottom: -8px;
  }
  #open span::after {
    bottom: -16px;
  }
  #close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #4cade0;
    opacity: 0;
    transition: .3s ease-in-out;
  }
  #menu-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 90%;
    max-width: 270px;
    height: 100%;
    background: #4cade0;
    transition: .3s ease-in-out;
    transform: translateX(-105%);
  }
  #input:checked ~ #close {
    display: block;
    opacity: .5;
  }
  #input:checked ~ #menu-content {
    transform: translateX(0%);
	 box-shadow: 6px 0 25px rgba(0, 0, 0, .15);

  }
	
}

試したこと

キャッシュを何回消しても表示されませんでした。
Google Chromeの検証機能で見てみてもHTMLタグもCSSもありました。

行動規範の内容に同意します

回答1件

ベストアンサー

@media screen and (max-width:768px) {

ブラウザのウィンドウの幅が768pxを超えていて、この中で設定されているハンバーガーメニュー用のスタイルが反映されていないのではないでしょうか。

試しに9768pxとかにしてみては。

投稿2021/10/25 13:19

itagagaki

総合スコア8402

退会済みユーザー

2021/10/25 13:24

９７６８pxにしてみましたが、ハンバーガーメニューは表示されません。背景色は表示されました。というか9768pxだとPC画面のサイズを超えてしまいますが・・・

itagagaki

2021/10/25 13:31

表示されますよ。 https://codepen.io/itagagaki/pen/GRvWrWo

退会済みユーザー

2021/10/26 08:02

ありがとうございます。今出先なので自分のサイトは確認できないのですが、これ、スマホ用のサイズで表示されてるって認識でいいのでしょうか？

itagagaki

2021/10/26 08:07

max-width:768px だとそれ以上の画面では当然効かないので、それが原因で確認ができていないということなのではないですか？という意味で、たとえば max-width:9768px とかでためしてみることを提案しました。 max-width:768px のままでも、たとえば Google Chrome デベロッパーズツールで320px端末をシミュレートして表示すると、ハンバーガーメニューはちゃんと表示されているしクリックすると動作しています。

退会済みユーザー

2021/10/26 12:51

ありがとうございます。確認してみます。その辺はいじってないはずなんですが、突然表示されなくなりました。

行動規範の内容に同意します