mediaクエリを使用した際に、pタグに記載した文字が消えてしまう

前提・実現したいこと

レスポンシブ対応（max-widthが1024px）でメニュバーを一番下（bottom）に来るようにし、pタグ内の文字を問題なく表示させたい。

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

mediaクエリが動いているようだが、幅を縮めた際にpタグ内の文字が消えてしまう。

該当のソースコード

html
1
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <meta name="viewport" content="width=device-width,initial-scale=1.0">
7    <link rel="stylesheet" href="style.css">
8  </head>
9  <body>
10    <div id="progressbar"></div>
11    <div id="scrollPath"></div>
12    <div id="percent"></div>
13    <nav id="nav-drawer">
14      <input type="checkbox" id="check" id="nav-input">
15      <label for="check" class="checkbtn open"></label>
16      <label for="check" class="checkbtn close"></label>
17      <label class="logo"><a href="#" class="logo">ロゴ</a></label>
18      <ul>
19        <li><a class="active" href="#">ホーム</a></li>
20        <li><a href="#">メニューバー2</a></li>
21        <li><a href="#">メニューバー3</a></li>
22        <li><a href="#">メニューバー4</a></li>
23        <li><a href="#">メニューバー5</a></li>
24      </ul>
25    </nav>
26    <section>
27      <h1>The Adventures of Sherlock Holmes</h1>
28      <h2>A SCANDAL IN BOHEMIA</h2>
29      <p>
30昔々あるところに、おじいさんとおばあさんが・・・・・・テスト文章
31昔々あるところに、おじいさんとおばあさんが・・・・・・テスト文章
32昔々あるところに、おじいさんとおばあさんが・・・・・・テスト文章
33昔々あるところに、おじいさんとおばあさんが・・・・・・テスト文章
34昔々あるところに、おじいさんとおばあさんが・・・・・・テスト文章
35昔々あるところに、おじいさんとおばあさんが・・・・・・テスト文章
36</p>
37    </section>
38
39    <script type="text/javascript">
40      var percent = document.getElementById('percent')
41      let progressbar = document.getElementById("progressbar");
42      let totalHeight = document.body.scrollHeight - window.innerHeight;
43      window.onscroll = function() {
44        let progress = (window.pageYOffset / totalHeight) * 100;
45        progressbar.style.height= progress + "%";
46        percent.innerHTML = "Reading Rate....  " + Math.round(progress) + "%";
47      }
48    </script>
49  </body>
50  </html>

css
1*
2{
3    margin: 0;
4    padding: 0;
5}
6body
7{
8    background: #000;
9    font-family: 'Noto Sans JP', sans-serif;
10}
11nav{
12    background-color: black;
13    width: 100%;
14    top:0;
15    position: fixed;
16}
17#check,
18#nav-input{
19    display: none;
20}
21.checkbtn{
22    font-size: 30px;
23    color: white;
24    float: right;
25    line-height: 80px;
26    margin-right: 40px;
27    cursor: pointer;
28    display: none;
29  }
30label.logo a{
31    color: white;
32    font-size: 40px;
33    line-height: 80px;
34    font-weight: 600;
35    text-decoration: none;
36    margin-left:30px;
37  }
38nav ul{
39    float: right;
40    margin-right: 60px;
41}
42nav ul li{
43    display: inline-block;
44    line-height: 80px;
45    margin: 0 2px;
46}
47nav ul li a{
48    color: #f2f2f2;
49    text-decoration: none;
50    font-weight: 600;
51    font-size: 20px;
52    padding: 7px 15px;
53    text-transform: uppercase;
54    text-decoration: none;
55}
56a.active,a:hover{
57    background: black;
58    transition: .5s;
59  }
60
61section
62{
63    margin: 0 10%;
64}
65section h1
66{
67    margin-top: 100px;
68    font-size: 3em;
69    color: rgb(206, 200, 200);
70}
71section h2
72{
73    margin-top: 50px;
74    font-size: 2em;
75    color: #555;
76}
77section p
78{
79    font-size: 1.2em;
80    color: #555;
81    padding: 10%;
82}
83
84
85::-webkit-scrollbar
86{
87    width: 0;
88}
89#scrollPath
90{
91    position: fixed;
92    top: 0;
93    right: 0;
94    width: 10px;
95    height: 100%;
96    background: rgba(255,255,255,0.05);
97}
98#progressbar
99{
100    position: fixed;
101    top: 0;
102    right: 0;
103    width: 10px;
104    background: linear-gradient(to top, #008aff,#00ffe7);
105    animation: animate 10s linear infinite;
106}
107
108@keyframes animate
109{
110    0%
111    {
112        filter: hue-rotate(0deg);
113        top: 0; right: 0;
114    }
115    50%
116    {
117        filter: hue-rotate(360deg);
118        background: linear-gradient(to top, pink,yellow);
119    }
120    100%
121    {
122        filter: hue-rotate(0deg);
123        top: 0; right: 0;
124    }
125}
126#progressbar:before
127{
128    content: '';
129    position: absolute;
130    top: 0;
131    left: 0;
132    width: 100%;
133    height: 100%;
134    background: linear-gradient(to top, #008aff,#00ffe7);
135    filter: blur(10px);
136}
137#progressbar:after
138{
139    content: '';
140    position: absolute;
141    top: 0;
142    left: 0;
143    width: 100%;
144    height: 100%;
145    background: linear-gradient(to top, #008aff,#00ffe7);
146    filter: blur(30px);
147}
148
149#percent
150{
151    position: fixed;
152    top: 50%;
153    right: 15px;
154    transform: translateY(-50%) rotateX(180deg) rotateY(180deg);
155    color: #fff;
156    font-size: 2em;
157    writing-mode: vertical-rl;
158    text-orientation: sideways-right;
159}
160
161/* mediaクエリを記述せずに、
162navにbottom:0;を記述すればメニューバーは下に来るが・・
163*/
164@media screen and (max-width:1024px) {
165
166    nav{
167      bottom: 0;
168    }
169}
170

試したこと

・タグの閉じ忘れ確認
・mediaクエリの書き方の確認
・mediaクエリを動かす以前の問題があるのではと思い、確認のためmediaクエリを消して、CSSのnavタグにtop:0;をbottom:0;に変更し、画面を縮めない状態できちんとbottomにnavタグに記載したメニューバーが来ているのかを確認
（基本的に、mediaクエリは元々のCSSに記述したコードを上書きしていくものだと認識しています）

補足情報（FW/ツールのバージョンなど）

JavaScriptで記述してるのはスクロールバーの装飾のためと、スクロール率を表示するために記述しています。mediaクエリを記述した際にこのスクロールバーも消えてしまっているため、メニューバー以下すべてに何かが影響しているかと考えています。

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

回答1件

ベストアンサー

幅を縮めた際にpタグ内の文字が消えてしまう。

背景色で隠れています。

css
1nav {
2	background-color: black;
3}

解決方法は、透明にすることです。

css
1nav {
2	background-color: transparent;
3}

投稿2020/07/01 06:39

Lhankor_Mhy

総合スコア36074

pontarou3

2020/07/16 06:51

申し訳ございません、コメントが反映されてませんでした。。。 transparent で即解決できました！ありがとうございました！

Lhankor_Mhy

2020/07/16 07:07

お知らせいただきありがとうございます。ご解決されて何よりです。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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