ハンバーガーメニューのレスポンスデザインにするとメニューが表示されない

ハンバーガーメニューを作成し、画面を小さくすると、メニューが出てきません。余白部分（ページ全体）にハンバーガーメニューがあるときはメニューがでるのですが、小さくして本文にかかる大きさになると、クリックしてもメニューが出ません。
どうかご教授お願い致します。　　追記―　まだ制作途中の段階のコードになります。

該当のソースコード

html

<body style="color:#548989; background-color:#f5f5dc;"   link="#666666" vlink="#666666" alink="#1b9dc9">
<div class="container  ">
      <div class="row">
      	<div class="col-12 m-0 p-0 ">
　　　　　<header div id="pagehead" >
      	<div class="row">
      	<div class="col-1 m-0 p-0">
	<a div class="title" href="HP-2020/index.html" >
	<img src="images/top/top-rogo.gif" alt="秋田県湯沢市の良質な家システムハウス篠建"></a></div>
	<div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span></span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
      <div id="nav-content">
        <li><a href="HP-2020/index.html">HOME</a></li>
      <a color="#99cc99" font-weight="bold">ようこそ篠建へ</a>
          <li><a href="company.html">篠建について</a></li>
          <li><a href="message.html">篠建からのメッセージ</a></li>
          <li><a href="office.html">事務所へよってたんせ</a></li>
　　　　　　　<a color="#99cc99" font-weight="bold">良質な家</a>
　　　　　<li><a color="#99cc99" >３つの施工法</a></li>
            <li><a href="hot-life.html">ほっとライフの家</a></li>
            <li><a href="fw.html">フレームウォール工法</a></li>
            <li><a href="zairai.html">在来工法</a></li>
          <li><a href="nagare.html">家造りの流れ</a></li>
	</div></div>
	<div class="col-11 m-0 p-0">
 	<div class="header-right">
	<ul class="icon">
    	<li class="web"><a href="https://www.youtube.com/channel/UCS2AysYSrfbLRjiEFyY8f2w" target="_blank">
	<img src="images/top/web_a1.gif"  alt="web内覧会"  aria-hidden="true"></i></a></li>
   	 <li class="mail"><a href="mailto:info@shinoken-sys.jp">
	<img src="images/top/mail_a1.gif" width="80" height="80" border="0"  alt="メール"  aria-hidden="true"></i></a></li>
 <li class="blog"><a href="https://weloffice.exblog.jp/" target="_blank">
	<img src="images/top/blog_a1.gif" width="80" height="80" border="0"  alt="ブログ"aria-hidden="true"></i></a></li>
    	<li class="add"><a div style=" color:#696969" >秋田県湯沢市千石町3-6-8<br>TEL 0183-72-2661<br>FAX 0183-72-4186</div></a></div></li> 
	</ul>
	</div></div>
	</div>
	</header>
      	<nav class="menu" >
        <li><a href="HP-2020/index.html">HOME</a></li>
        <li><a href="#">ようこそ篠建へ</a>
        <ul>
          <li><a href="company.html">篠建について</a></li>
          <li><a href="message.html">篠建からのメッセージ</a></li>
          <li><a href="office.html">事務所へよってたんせ</a></li>
        </ul>
        </li>
        <li><a href="#">良質な家</a>
        <ul class="sub">
          <li><a href="#">３つの施工法 ≫</a>
          <ul>
            <li><a href="hot-life.html">ほっとライフの家</a></li>
            <li><a href="fw.html">フレームウォール工法</a></li>
            <li><a href="zairai.html">在来工法</a></li>
          </ul>
          </li>
          <li><a href="nagare.html">家造りの流れ</a></li>
        </ul>
        </li>
      </nav></div></div></div></div>
      <div class="container">
      <div class="row">
	<div class="col-sm-12 col-md-12 col-lg-9 mt-2 p-1">
	<h3 align="center" style="color:#1b9dc9; background-color:#78d68f;>
	<h3 style="text-align:left;" align="left"><font color="#ffffff"　backgrund-color="#669966">事務所によってたんせ</font></h3>
　　　　<div class="row">
         	<div class="col-sm-12 col-md-6 col-lg-6 m-0.5"><img src="images/office/cat.jpg"></div>
		</div>
	</div>
　　<div class="col-sm-12 col-md-12 col-lg-3 m-0 p-0">
      	<aside>
     	 <ul class="icon10">
     	 <div class="col-12 ">
	<li class="new"><p>シノケンNEWS</p><a href="index.html" >
	新着情報はこちら</a></li></div><br>
	<div class="col-sm-6 col-md-4 col-lg-12 m-0 p-0">
	<li class="DIY"><a href="diy.html" >
		<img src="images/sub/diy-b1.gif" width="185" height="120" border="0"  alt="メンテピット・仮設物置DIYキット"></a></li></div>
</div></div></ul></aside>	
      	</div>
      	</div></div>
      	</div>
</div></div></div>
      	</body>

css

nav.menu {
   margin: 0px ;               
   padding: 0px 5px 0px 20x; 
   background-color: #339966; 
   text-align:center;
}
nav.menu li {
   width: 18%;         
   display: inline-block; 
   list-style-type: none; 
   position: relative;   
　font-weight: normal; 
nav.menu a {
   background-color: #339966; 
   color: white;              
   line-height: 40px;        
   text-align: center;        
   text-decoration: none;     
   font-weight: bold;         
   display: block;            
}
nav.menu a:hover {
   background-color: #99cc99; 
   color: #696969;            
　font-weight: normal; 
}

nav.menu li:hover > ul {
   display: block;        
}
nav.menu ul {
   margin: 0px;       
   padding: 0px;       
   display: none;      
   position: absolute;  
   z-index: 1000;     
}
nav.menu ul li {
   width: 100%;             
   border-top: 1px solid white; 
}
nav.menu ul li a {
   line-height: 35px;  
   text-align: center;  
   padding-left: 5px;  
   font-weight: normal; 
}
nav.menu ul li a:hover {
   background-color: #99cc99;
   color: #696969;            
}
nav.menu ul ul {
   width: 100%;
   margin: 0px;        
   padding: 0px;        
   display: none;      
   position: absolute; 
   top: 10px;          
   left: 100%;         
   border-left: 1px solid white; 
@media screen and (min-width:1024px) { 
 #nav-drawer {
    display:none;
  }
}
@media screen and (max-width:1024px) {
nav.menu {
 display: none;
}
#nav-drawer {
  position: relative;
  float:right;
  list-style-type: none;
}
.nav-unshown {
  display:none;
}
#nav-open {
  display: inline-block ;
  width: 30px;
  height: 22px;
  vertical-align: middle;
  position: fixed ;
  top: 25px;
  right:40px;
  padding-right:0,auto;
}
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;
  width:30px;
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
  }
#nav-open span:before {
  bottom: -10px;
}
#nav-open span:after {
  bottom: -18px;
}
#nav-close {
  display: none;
  position: fixed ;
  z-index: 999999;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999999;
  width: 45%;
  max-width:330px;
  height: 100%;
  background: #fff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(105%);
  transform: translateX(105%);
  padding:2em;
}
#nav-content  a {
 text-decoration:none;
} 
#nav-input:checked ~ #nav-close {
  display: block !important;
  opacity: .5;
}
#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
}
body {
	margin: 0,auto;
}
.container  {
	background-color:#ffffff;
	}
/*　head title 　*/
#pagehead { 
	height:125px;
	margin: 0 auto;
	padding:0.5em 1.5em;
}
@media screen and (max-width:1024px) {
.title img {
	width:auto;
	margin:0,auto;
	float:left;
}
}
/* title right buttom  */
.header-right {
	width:65%;
	position: absolute;
	top: 1.5em;
	right:0;
}
@media screen and (max-width:1024px) {
.header-right {
	display:none;
}
}
/* icon buttom */
.icon  {
	display: -webkit-flex; /* Safari */
	display: flex;
	list-style-type: none;
}
.icon li {
	margin-right: 7px;	
}
.icon li a :hover {
	opacity:75%;
}

.icon li.blog img {
	margin-right:13px;
}
/* sabu menu　*/
.tag {
	margin: 0 auto;
}
@media screen and (max-width:1024px) {
.tag{

	float:left;
}
}
/* icon2 button */
.icon2  {
	display: -webkit-flex; /* Safari */
	list-style-type: none;	
	flex-direction:row;
	flex-wrap:wrap;
	width:95%;
	padding-top:0;
	padding-bottom:1em;
}
.icon2 li {
	padding:0em 0.1em;
}
.icon2 a :hover {
	opacity:75%;
}
. icon2 img {
	margin:0 auto;
	display:block;
}

/* ここまで共通 */
.wrapper {
	float: left;
	margin: 0;
	width: 100%;
	margin-right: -200px;
	background-color:#ffffff;
}
.wrapper main {		
 	margin: 0;
	margin-right: 200px;
}
.wrapper aside {	
	height: auto;
	width:200px;	
}
@media screen and (max-width: 1000px) {
.wrapper ,.wrapper main ,.wrapper aside {
          float: none;
          margin: 0;
          width: 97%;
} 
.icon10 {
	display: -webkit-flex; /* Safari */
	list-style-type: none;	
	flex-direction:row;
	flex-wrap:wrap;
	width:95%;
	padding-top:0;
	padding-bottom:1em;
}	
}
 ul.icon10 {
	list-style-type: none;
}
li.new {
	width:150px;
	height:60px;
	border:solid 1px orange;
	padding:1em 0.5em;
	margin:1em;
	line-height:0.3em;
	text-align:center;
	float: left;
} 
 li.new a {
	text-decoration:none;
}
li.kouhou p {
	border-top:solid 1px darkgray;
	text-align:center;
	padding:0.5em;
	width:150px;
	float: left;
}
.icon10 a :hover {
	opacity:75%;
}
main#photo {
	width:25%;	
	padding-left:2em;
	padding-right:3em;
	padding-bottom:3em;
}
#photo img {
	margin:0.5em;
}
mai#p1 {	
	line-height:180%;
}
#p1,#p2,#p3,#p4,#p5,#p6 {
	margin-left:2em;
	line-height:180%;
}
#p2 h4 {
	padding:0;
	margin:0;
}
#p1 h4,#p3 h4,#p4 h4,#p5 h4,#6 h4 {
	padding:0;
	margin:0;
}
#p2 p {
	margin-top:0;
}
#p1 p,#p3 p,#p4 p,#p5 p,#p6 p {
	margin-top:0;
	margin-bottom:2em;
}
span {
	display:inline-block;
	width:6em;
}
span.wid-8 {
	display:inline-block;
	width:8em;
}

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

回答2件

画面幅が1024px以下の時に表示されるハンバーガーメニューをクリックしてもメニューか表示されないということなら、原因は、
ラベル（#nav-open）の幅がautoに設定してあるため、0になっていることですね。中身がposition: absolute;のため浮いた状態になり親要素は幅を設定しないと幅0になります。幅が0ためクリックできないのです。

適切な幅を設定すればクリックするとメニューが表示されます。

css
1/*アイコンのスペース*/
2#nav-open {
3    display: inline-block;
4    width: 30px; /* 幅を適切に設定する */
5    height: 22px;
6    /*  vertical-align: middle;*/
7    position: fixed;
8    top: 25px;
9    right:40px;
10    /* padding-right:0,auto;*/
11}

投稿2020/11/09 05:40

hatena19

総合スコア33784

haru829

2020/11/09 07:51

ご回答ありがとうございます。上記のご指摘通りに、width: 30px; でやってみたのですが、いきませんでした。うまく言えないのですが、メイン部分とハンバーガーメニューの位置がかぶるといかなくなるようです。外に外れているときには、クリックするとメニューが出てきます。なにかが邪魔をしているような気がします。情報がありましたら、どうかよろしくお願いいたします。

hatena19

2020/11/16 00:50

まずは提示のHTMLコードに全角空白が数か所ありますのでそれを削除してください。コード中に全角空白があると正しく動作しません。また、開始タグと閉じタグの対応がおかしいです。 CSSにも全角空白があったり } が不足している箇所があります。構文チェックツールで構文エラーをチェックして修正するか、構文エラーは指摘してくれるコード用エディターを使うかしましょう。【保存版】HTML・CSSの構文チェックツール5選 https://blog.universe-web.jp/4567/

haru829

2020/11/26 02:20

ご回答いただきありがとうございます。修正箇所が多く、直しを加えている最中です。ご指摘いただいた点を修正してから、改め現状をお伝えさせていただきます。よろしくお願いいたします。

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

どうしてハンバーガーアイコンのCSSが反映されないかというと、ブレイクポイントの値を一緒にしているからです。
もう一度max-widthとmin-widthについて調べてみてください。
max-widthは最大値のことで、min-widthは最小値を表します。
つまり、○○px以上だったら～する・○○px以下だったら～するというということになります。

今の質問者さんの記述だと、1024px以上だったら以下の記述にする・1024px以下だったら以下の記述にするということになっているからCSSが適用されないということになります。
以上・以下はこの例だと1024pxを含むことになるので、混在する形になり適用されないというわけです。

【CSS】max-widthとmin-widthの使い方まとめ

投稿2020/11/09 02:21

編集2020/11/09 02:25

itzuakniami123

総合スコア74

hatena19

2020/11/09 05:40

CSSは後から記述した方か優先されますから、画面幅が1024px以下の時は下記のセクションの記述が適用されて、 @media screen and (max-width:1024px) {} 画面幅が1024pxより大きいときは、下記のセクションの記述が適用されることになり、 @media screen and (min-width:1024px) { } どちらかは適用されると思いますが。どちらも適用されないということはないと思います。

haru829

2020/11/09 07:38

ご回答ありがとうございます。値を変えてやってみましたが、クリックしてもメニューが表示されませんでした。 #nav-drawerは小さい時に表示をするメニュー、nav.menuは大きい画面の時に表示するメニューと分けて制作をしていましたので、値が違うとスムーズな入れ替えができないような感じしました。アドバイスいただきありがとうございました。もう少し頑張ってみます。

hatena19

2020/11/09 09:52

提示のHTMLとCSSだとハンバーガーメニュークリックでメニューが表示されます。症状の再現できるコードを提示するか、サイトのURLを提示してもらえませんか。でないと原因の特定は難しいです。

haru829

2020/11/15 23:06

ご回答ありがとうございます。コードを追加しました。こちらへは載せる文字数が限定されているようでしたので、わかる範囲内でのコードを追加しております。足りないものがありましら、お知らせいただけますと幸いです。よろしくお願いいたします。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ハンバーガーメニューのレスポンスデザインにするとメニューが表示されない

該当のソースコード

関連した質問