Menu bar is not visible when the screen is made smaller - html

Question

I was trying to write the header of the page with a video as background. The navigation links are available when the screen is above 1200px. But the menu bar is not visible when the screen is made smaller than 1200px. How to fix the invisible menu bar?
This is the html code which includes the video as background and the related navigation links. The menu bars and times icons are also inserted.
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
}
nav img {
width: 140px;
position: relative;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 20px 15px;
position: relative;
}
.nav-links ul li a {
color: #fff;
text-decoration: none;
font-size: 14px;
}
.header video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
nav .fa {
display: none;
}
#media (max-width: 1200px) {
.nav-links ul li {
display: block;
padding: 15px 10px;
}
.nav-links {
position: absolute;
background: #fff;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
}
nav .fa {
display: block;
cursor: pointer;
margin: 10px;
font-size: 24px;
}
}
<section class="header">
<video src="images/Helicopters9.mp4" muted loop autoplay></video>
<nav>
<img src="images/logo.png" alt="helicopter" />
<div class="nav-links" id="navlinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li>HOME</li>
<li>FAQ</li>
<li>MEMBER AREA</li>
<li>COMMUNITY GROUP</li>
<li>LATEST PLACES TO FLY</li>
<li>TRANING ONLINE</li>
<li>REVIEW</li>
</ul>
<i class="fa fa-bars" onclick="showMenu()"></i>
</div>
</nav>
</section>

Answer 1

Your menu is visible on smaller than 1200ox screens too. Just change the background-color of link such that white color is visible on it or change color other than white.
On smaller screen a scroll bar is created and your menu aligns to the right-most part of screen
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
}
nav img {
width: 140px;
position: relative;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 20px 15px;
position: relative;
}
.nav-links ul li a {
color: red;
text-decoration: none;
font-size: 14px;
}
.header video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
nav .fa {
display: none;
}
#media (max-width: 1200px) {
.nav-links ul li {
display: block;
padding: 15px 10px;
}
.nav-links {
position: absolute;
background: #fff;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
}
nav .fa {
display: block;
cursor: pointer;
margin: 10px;
font-size: 24px;
}
}
<section class="header">
<video src="images/Helicopters9.mp4" muted loop autoplay></video>
<nav>
<img src="images/logo.png" alt="helicopter" />
<div class="nav-links" id="navlinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li>HOME</li>
<li>FAQ</li>
<li>MEMBER AREA</li>
<li>COMMUNITY GROUP</li>
<li>LATEST PLACES TO FLY</li>
<li>TRANING ONLINE</li>
<li>REVIEW</li>
</ul>
<i class="fa fa-bars" onclick="showMenu()"></i>
</div>
</nav>
</section>