Home>

I want to make the menu bar at the bottom (bottom) with responsive support (max-width is 1024px) and display the characters in the p tag without any problem.

It seems that the media query is working, but the characters in the p tag disappear when the width is reduced.
Applicable source code
<html><head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="stylesheet" href="style.css"></head><body>            <nav>  <input type="checkbox">  <label for="check"></label>  <label for="check"></label>  <label>logo</label>  <ul>    <li>Home</li>    <li>Menu bar 2</li>    <li>Menu bar 3</li>    <li>Menu bar 4</li>    <li>Menu bar 5</li>  </ul></nav><section>    The Adventures of Sherlock Holmes      A SCANDAL IN BOHEMIA    <p>There is an old man and an old man in a place where there used to be...
There is an old man and an old man in a place where there used to be...
There is an old man and an old man in a place where there used to be...
There is an old man and an old man in a place where there used to be...
There is an old man and an old man in a place where there used to be...
There is an old man and an old man in a place where there used to be...</p></section><script type="text/javascript">    var percent = document.getElementById('percent')
      let progressbar = document.getElementById("progressbar");
      let totalHeight = document.body.scrollHeight-window.innerHeight;
      window.onscroll = function() {
        let progress = (window.pageYOffset/totalHeight) * 100;
        progressbar.style.height= progress + "%";
        percent.innerHTML = "Reading Rate.... "+ Math.round(progress) + "%";
      }
  </script></body></html>
*
{
    margin: 0;
    padding: 0;
}
body
{
    background: #000;
    font-family:'Noto Sans JP', sans-serif;
}
nav{
    background-color: black;
    width: 100%;
    top:0;
    position: fixed;
}
#check,
#nav-input{
    display: none;
}
.checkbtn{
    font-size: 30px;color: white;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
  }
label.logo a{
    color: white;
    font-size: 40px;
    line-height: 80px;
    font-weight: 600;
    text-decoration: none;
    margin-left:30px;
  }
nav ul{
    float: right;
    margin-right: 60px;
}
nav ul li{
    display: inline-block;
    line-height: 80px;
    margin: 0 2px;
}
nav ul li a{
    color: #f2f2f2;
    text-decoration: none;
    font-weight: 600;
    font-size: 20px;
    padding: 7px 15px;
    text-transform: uppercase;
    text-decoration: none;
}
a.active,a:hover{
    background: black;
    transition: .5s;
  }
section
{
    margin: 0 10%;
}
section h1
{
    margin-top: 100px;
    font-size: 3em;
    color: rgb(206, 200, 200);
}
section h2
{
    margin-top: 50px;
    font-size: 2em;
    color: #555;
}
section p
{
    font-size: 1.2em;
    color: #555;
    padding: 10%;
}

::-webkit-scrollbar
{
    width: 0;
}
#scrollPath
{
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: rgba(255,255,255,0.05);
}
#progressbar
{position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    background: linear-gradient(to top, #008aff,#00ffe7);
    animation: animate 10s linear infinite;
}
@keyframes animate
{
    0%
    {
        filter: hue-rotate(0deg);
        top: 0;right: 0;
    }
    50%
    {
        filter: hue-rotate(360deg);
        background: linear-gradient(to top, pink,yellow);
    }
    100%
    {
        filter: hue-rotate(0deg);
        top: 0;right: 0;
    }
}
#progressbar:before
{
    content: ``;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #008aff,#00ffe7);
    filter: blur(10px);
}
#progressbar:after
{
    content: ``;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #008aff,#00ffe7);
    filter: blur(30px);
}
#percent
{
    position: fixed;
    top: 50%;
    right: 15px;
    transform: translateY(-50%) rotateX(180deg) rotateY(180deg);
    color: #fff;
    font-size: 2em;
    writing-mode: vertical-rl;
    text-orientation: sideways-right;
}
/* media without writing a query,
If i write bottom:0;in nav, the menu bar will come down...
*/
@media screen and (max-width:1024px) {
    nav{
      bottom: 0;
    }
}
What I tried

・Confirm forgetting to close tags
・Check how to write media query
・I think there is a problem before moving the media query, delete the media query for confirmation, change top:0;to bottom:0;in the CSS nav tag, and properly keep the screen in a state where it does not shrink. Check if the menu bar described in the nav tag is coming
(Basically, I understand that the media query overwrites the code written in the original CSS.)

Supplemental information (FW/tool ​​version, etc.)

It is written in JavaScript to decorate the scroll bar and to display the scroll rate. This scroll bar disappeared when I wrote the media query, so I'm wondering if something is affecting everything under the menu bar.

  • Answer # 1

    >When the width is reduced, the characters in the p tag disappear.

    It is hidden by the background color.

    nav {
        background-color: black;
    }

    The solution is to make it transparent.

    nav {
        background-color: transparent;
    }