レスポンシブ仕様でハンバーガーメニューについての質問です。

【レスポンシブ仕様でハンバーガーメニューについての質問です。】

レスポンシブのハンバーガーメニューを作成時に下記ソースにて制作いたしました。
オープン前のバーガーメニューに関しましてはこちらのデザインでいいのですが、
オープン後、表示される【×ボタンのバックグラウンドに設置しております（#ce121b）】の色を消したいと思っており色々と自分でサイトなどを閲覧したのですが、解決できませんでした。

あまり知識がなく説明不足で申し訳ございませんがご教授いただければと思います。
よろしくお願いいたします。

下記制作したソースとなります。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="format-detection" content="telephone=no">
<title>ナビボタン検証</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="css/reset.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://fit-jp.com/demo/bgswitcher/js/jquery.bgswitcher.js"></script>
<style>

/* === header === */

/* bager menu */

#header #navi {
   opacity: 5;
  transition: all .6s;
  overflow-y: auto;
  padding-top: 40px;
  width: 80vw;
  height: 100vh;
  z-index: 100;
  top: 0;
  right: -110%;
  cursor: pointer;
  background-color: rgba(0,0,0,0.84);
  position: fixed;
}	
#header #navi li a{
color: #fff;
display: block;
text-align: center;
line-height: 1.4em;
margin-bottom: 30px;
}
#header .nav_btn {
  width: 55px;
  height: 55px;
  z-index: 300;
  top:0px;
  right: 0px;
  cursor: pointer;
  background-color: #ce121b;
  position: absolute;
}
.hamburger_line {
  transition: all .6s;
  width: 30px;
  height: 3px;
  left: 12px;
  background-color: #fff;
  position: absolute;
}
.nav_open .hamburger_line {
  transition: all .6s;
  width: 34px;
  height: 3px;
  left: 5px;
  background-color:#ccc;
  position: absolute;
}
.hamburger_line1 { top: 14px; }
.hamburger_line2 { top: 25px; }
.hamburger_line3 { top: 37px; }

.nav_bg {
  opacity: 0;
  transition: all .6s;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  top: 0;
  left: 0;
  visibility: hidden;
  cursor: pointer;
  position: fixed;
}
/* 表示された時用のCSS */
.nav_open #header #navi { right: 0; }

.nav_open .nav_bg {
  opacity: .8;
  visibility: visible;
}
.nav_open .hamburger_line1 {
  transform: rotate(45deg);
  top: 20px;
}
.nav_open .hamburger_line2 {
  width: 0;
  left: 50%;
}
.nav_open .hamburger_line3 {
  transform: rotate(-45deg);
  top: 20px;
}
#navi li:nth-child(8),#navi li:nth-child(9){
width: 80%;
margin: auto;
display: block;
}

.g_navi_page{
width: 100%;
height: auto;
margin-top: 2px;
background-color: #fff;
}

.g_navi_inner{
width: 100%;
height: auto;
margin: 0 auto;
}
	
.g_navi_page ul {
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap:wrap;
border: solid 1px #ccc;
}	
.g_navi_page ul li {
width: 50%;
border-left: 1px solid #fff;
border: solid 1px #ccc;
}
.g_navi_page ul li a{
width: auto;
display: block;
padding: 17px 10px;
color: #000;
font-size:14px;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>

<section id="wrap">
<header id="header">
<div class="header_box">
<div class="header_logo">
<h1><img style="background-color: #000;" src="" alt="ロゴ"></h1>
</div>
<nav>
<ul id="navi">	
<li><a href="">ボタン</a></li>
<li><a href="">ボタン</a></li>
<li><a href="">ボタン</a></li>
</ul>
</nav>
   <div class="nav_btn" id="nav_btn">
      <span class="hamburger_line hamburger_line1"></span>
      <span class="hamburger_line hamburger_line2"></span>
      <span class="hamburger_line hamburger_line3"></span>
    </div>
    <div class="nav_bg" id="nav_bg"></div>
    <!-- /ボタン部分ここを後で追加するだけ-->  
</header>
</section>
<script src="js/scroll.js"></script>
<script src="js/accordion.js"></script>
<script>
  /* SP menu */
  function toggleNav() {
  var body = document.body;
  var hamburger = document.getElementById('nav_btn');
  var blackBg = document.getElementById('nav_bg');

  hamburger.addEventListener('click', function() {
    body.classList.toggle('nav_open'); //メニュークリックでnav-openというクラスがbodyに付与
  });
  blackBg.addEventListener('click', function() {
    body.classList.remove('nav_open'); //もう一度クリックで解除
  });
}
toggleNav();
</script>
</body>
</html>

m.ts10806

2020/06/20 09:43

タイトルを再掲する必要はないかと。。コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

ACEprojectJapan

2020/06/20 16:18

ご忠告ありがとうございます。こちら修正いたしました。

m.ts10806

2020/06/20 20:33

✕忠告 ○質問の修正依頼(指摘)

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

回答1件

ベストアンサー

css
1.nav_open #header .nav_btn {
2	background-color: transparent;
3}

参考：
transparent | <color> - CSS: カスケーディングスタイルシート | MDN

投稿2020/06/23 01:58

Lhankor_Mhy

総合スコア36896

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.37%

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

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

質問する

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

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

レスポンシブ仕様でハンバーガーメニューについての質問です。

関連した質問