Q: When I hover to a link with color red, The color and responsiveness of the link disappears when I go further down the website I am currently practicing making a simple website. I have a problem in the navigation bar above my website. When I scroll further down my website, their color when I hover and their responsiveness disappears. Here's a pic to help you understand my problem.


I don't know if I use some codes right but here's my code, you can leave a tip or you can also add on how the code works so I can correct my mistake.


html,body{
    height: 163%;
}

body{
    background: rgba(236,232,225,255);
    color: #333;
    font-family: helvetica;
    font-size: 15px;
    line-height: .5cm;

    margin: 0;
    padding: 0;
}

/* links configuration here */
a{
    text-decoration: none;
}

a:hover{
    color:rgba(216, 108, 108, 0.932);
}
/* links configuration ends here */

.whole{
    margin-left: 50px;
    margin-right: 50px;
    font-size: 15px;
}

#webname{ /* heading here */
    margin-top: 17%;
    margin-bottom: 17%;
    
    text-align: center;
    font-size: 150px;
    font-family: VALORANT;
    color:white;
}

#webname:hover{
    color: rgba(216, 110, 110, 0.933);
    cursor: default;
}

.topnav {
    position: fixed;
    overflow: hidden;
    background-color: #333;

    padding-top: 10px;
    padding-bottom: 10px;
    
    top: 0;
    width: 100%;
}

.topnav a{
    color: white;
    padding-top: 15px;
    padding-left: 25px;
    padding-right: 5px;

    float: left;
    font-family: VALORANT;
    font-size: 25px;

    display: block;
}

.topnav a:hover{
    color: rgba(216, 108, 108, 0.932);
}

.topnav img{
    float: right;
    padding-right: 15px;
}

#videoBG{ /* background vid */
    position: absolute;
    right: 0; 
    bottom: 30%;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

/* Paragraphs starts here */

.gameplay{ /* First Paragraph here */
    margin-top: 10px;
    
    width: 30%;
    float: left; 
}

#paraFirst {
    font-family: VALORANT;
    font-size: 30px;
    width: 38%;
}
#paraFirst:hover{
    color: rgba(216, 108, 108, 0.932);
    cursor: default;
}

.agents{ /* Second Paragraph here */
    position: relative;
    top: 250px;

    float: right;
    width: 40%;
}

#paraSec{
    font-family: VALORANT;
    font-size: 30px;
    width: 20%;
}
#paraSec:hover{
    color: rgba(216, 108, 108, 0.932);
    cursor: default;
}

.guns{
    position: relative;
    top: 370px;

    float: left;
    width: 40%;
}

#paraThird{
    font-family: VALORANT;
    font-size: 30px;
    width: 14%;
}
#paraThird:hover{
    color: rgba(216, 108, 108, 0.932);
    cursor: default;
}

.maps{
    position: relative;
    top: 780px;

    float: right;
    width: 40%;
}

#paraFour{
    font-family: VALORANT;
    font-size: 30px;
    width: 14%;
}
#paraFour:hover{
    color: rgba(216, 108, 108, 0.932);
    cursor: default;
}

.shootingRange{
    position: relative;
    top: 850px;

    float: left;
    width: 40%;
}

#paraFifth{
    font-family: VALORANT;
    font-size: 30px;
    width: 50%;
}
#paraFifth:hover{
    color: rgba(216, 108, 108, 0.932);
    cursor: default;
}

@media (min-aspect-ratio: 16/9){
    #videoBG{
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9){
    #videoBG{
        width: auto;
        height: 100%;
    }
}

@media (max-width: 767px){
    #videoBG{
        display: none;
    }

    body {
        background: url('valoClip.png');
        background-size: cover;
    }
}

@font-face {
    font-family: 'VALORANT';
    src: url(fonts/Valorant\ Font.ttf);
    font-style: normal;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Valorant</title>
    <link rel="stylesheet" href="Valorant.css">
</head>

<body>
     <!--Navigation Bar here-->
     <img src="images/Valorant.png"> 
    
     <div class="topnav">
        <img src="images/Valorant.png"> 
        <a href="#">Home</a>
        <a href="#">Gameplay</a>
        <a href="#">About</a>
        <a href="#">Guides</a>
    </div>
    
    <!--Title-->
    <h1 id="webname">valoraNt</h1>
    
    <div class="wrapper">
        <video id="videoBG" poster="valoClip.png" autoplay muted loop>
            <source src="valoClip.mp4" type="video/mp4">
        </video>

    </div>

    <!--Gameplay here-->
<div class="whole">    
    <div class="gameplay">
        
    <h3 id="paraFirst">GAMEPLAY</h3>
    
    <p>
    Valorant is an online <abbr title="First Person Shooter">FPS</abbr> game that defy the limits.
    Blend your style and experience on a global, competitive stage. The game has 13 rounds to attack
    and defend your side using sharp gunplay and tactical abilities. And, with one life per-round,
    you'll need to think faster than your opponent if you want to survive. Take on foes across
    Competitive and Unranked modes as well as Deathmatch and Spike Rush. There is also a Practice
    mode or tool to help you manage your aim.
    </p>

    <p><a href="https://www.youtube.com/watch?v=e_E9W2vsRbQ" target="_blank"> Watch the trailer here</a></p>
    </div>

    <!--Agents here-->
    <div class="agents">
    <h3 id="paraSec">AGENTS</h3>

    <p>
        Valorant is a 5v5 tactical shooter where each player plays as a character called an "agent".
        <br>
        <br>
        There are currently 15 agents in the game; Astra, Breach, Brimstone, Cypher, Jett, Killjoy,
        Omen, Phoenix, Raze, Reyna, Sage, Skye, Sova, Viper, Yoru.
    </p>

    <p>
        Each agent has four unique abilities (including ultimate).
        <br>
        <br>
        So far, the agent abilities range from traditional utility from realistic shooter such as
        flasbangs and smoke granades but also include magical or futuristic themed abilities like
        conjuring walls and sonic arrows that act like a radar.
        <br>
        <br>
        There are some agents that will be available for new accounts while other agents have to be
        unlocked through progression or battle pass system.
    </p>
    </div>

    <!--Guns here-->
    <div class="guns">
    <h3 id="paraThird">GUNS</h3>

    <p>
        Valorant has a buy phase at the beginning of each round. Every agent has access to the same
        guns and shields in their shop.
        <br>
        <br>
        There are currently 17 guns in valorant; Classic, Shorty, Frenzy, Ghost, Sheriff, Stinger,
        Spectre, Bucky, Judge, Marshal, Operator, Ares, Odin, Bulldog, Guardian, Phantom, Vandal.
    </p>

    <p>
        Every agent has a primary weapon slot (SMGs, Shotguns, Snipers, and Heavy Machine Guns),
        a secondary sidearm slot, and a knife.
        <br>
        <br>
        During the buy phase, players can sell their sidearm or primary, request a teammate to buy a gun
        for them if they're low on funds, announce that they have extra funds to purchase for a teammate,
        or tell them to save their money for the round.
    </p>

    <p>
        Guns vary in terms of:
        <ul>
            <li>Primary and alt fire settings</li>
            <li>Damage output (based on head/body/legs)</li>
            <li>Magazine capacity</li>
            <li>Recoil pattern</li>
            <li>Ability to pierce through walls</li>
        </ul>
    </p>
    </div>

    <!--Maps here-->
    <div class="maps">
    <h3 id="paraFour">MAPS</h3>

    <p>
        So far there are 5 maps with one objective: planting or defending against a bomb called "spike".
        <br>
        <br>
        The 5 playable maps are:
        <ul>
            <li>Bind</li>
            <li>Haven</li>
            <li>Split</li>
            <li>Ascent</li>
            <li>Icebox</li>
        </ul>
    </p>

    <p>
        Each map also has two ultimate orbs in neutral locations that teams can try to grab.
        The orb grants one point the ulimate of the agent who picked it up.
        <br>
        <br>
        Another general thing to note is that some walls and terrain can be fired through. As a rule
        of thumb, anything that leaves a bullter hole can be penetrated.
    </p>
    </div>

    <!--Shooting Range here-->
    <div class="shootingRange">
    <h5 id="paraFifth">SHOOTING RaNGE</h5>
    <p>
        The last existing map is dedicated to practicing and honing your skills. Here you can
        change your agent and guns at anytime (you can even teset characters that you do not own yet).
        <br>
        <br>
        At the shooting range, you can shoot at dummies that spawn at different speeds and settings such
        as strafing.
        <br>
        <br>
        There is also an area dedicated to shooting long-distance targets to test the effective range of
        guns.
        <br>
        <br>
        Lastly, you can also practice scenarios such as planting a spike and then defending against bots
        to improve your composure and ability in clutch situations.
    </p>
    </div>
</div>


</body>
</html>


I think the name of every paragraphs overlaps the links in the navbar. Thanks for the help, much appreciated :>

A: You can achieve the same look with margins instead of relative position
I have added a few classes to your CSS .mt-250 which will only add 250px margin in top of element, .width-40 make the width of element 40% of parent, .left and .right will make the element float to left or float to right
and delete some redundant class .gameplay, .agents, .guns, .maps, .shootingRange and replace them with the newly created class
for example this line <div class="mt-250 width-40 right"></div> will mean that this div will have a 250px margin in top of it and has a width of 40% and will float to the right
also delete some redundant IDs #paraFirst, #paraSec, #paraThird, #paraFour, #paraFifth and it's :hover change all of  them with a single new class called paraheader to make Constant look and feel with all paragraph headers
note that all the above changes eliminate redundancy in style at Paragraphs sections and reduces number of line from 88 line to 15 line only which lead to faster loading on real network
working markup


html,
body {
  height: 163%;
}

body {
  background: rgba(236, 232, 225, 255);
  color: #333;
  font-family: helvetica;
  font-size: 15px;
  line-height: .5cm;
  margin: 0;
  padding: 0;
}


/* links configuration here */

a {
  text-decoration: none;
}

a:hover {
  color: rgba(216, 108, 108, 0.932);
}


/* links configuration ends here */

.whole {
  margin-left: 50px;
  margin-right: 50px;
  font-size: 15px;
}

#webname {
  /* heading here */
  margin-top: 17%;
  margin-bottom: 17%;
  text-align: center;
  font-size: 150px;
  font-family: VALORANT;
  color: white;
}

#webname:hover {
  color: rgba(216, 110, 110, 0.933);
  cursor: default;
}

.topnav {
  position: fixed;
  overflow: hidden;
  background-color: #333;
  padding-top: 10px;
  padding-bottom: 10px;
  top: 0;
  width: 100%;
}

.topnav a {
  color: white;
  padding-top: 15px;
  padding-left: 25px;
  padding-right: 5px;
  float: left;
  font-family: VALORANT;
  font-size: 25px;
  display: block;
}

.topnav a:hover {
  color: rgba(216, 108, 108, 0.932);
}

.topnav img {
  float: right;
  padding-right: 15px;
}

#videoBG {
  /* background vid */
  position: absolute;
  right: 0;
  bottom: 30%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-size: cover;
  overflow: hidden;
}


/* Paragraphs starts here */

.mt-250 {  margin-top: 250px}
.left {float: left}
.right { float: right}
.width-40 {width: 40%;}

.paraheader{
  font-family: VALORANT;
  font-size: 30px;
  width: 38%;
}

.paraheader:hover {
  color: rgba(216, 108, 108, 0.932);
  cursor: default;
}

   

@media (min-aspect-ratio: 16/9) {
  #videoBG {
    width: 100%;
    height: auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  #videoBG {
    width: auto;
    height: 100%;
  }
}

@media (max-width: 767px) {
  #videoBG {
    display: none;
  }
  body {
    background: url('valoClip.png');
    background-size: cover;
  }
}

@font-face {
  font-family: 'VALORANT';
  src: url(fonts/Valorant\ Font.ttf);
  font-style: normal;
}
<!--Navigation Bar here-->
<img src="images/Valorant.png">

<div class="topnav">
  <img src="images/Valorant.png">
  <a href="#">Home</a>
  <a href="#">Gameplay</a>
  <a href="#">About</a>
  <a href="#">Guides</a>
</div>

<!--Title-->
<h1 id="webname">valoraNt</h1>

<div class="wrapper">
  <video id="videoBG" poster="valoClip.png" autoplay muted loop>
            <source src="valoClip.mp4" type="video/mp4">
        </video>

</div>

<!--Gameplay here-->
<div class="whole">
  <div class="left width-40">

    <h3 class="paraheader">GAMEPLAY</h3>

    <p>
      Valorant is an online <abbr title="First Person Shooter">FPS</abbr> game that defy the limits. Blend your style and experience on a global, competitive stage. The game has 13 rounds to attack and defend your side using sharp gunplay and tactical
      abilities. And, with one life per-round, you'll need to think faster than your opponent if you want to survive. Take on foes across Competitive and Unranked modes as well as Deathmatch and Spike Rush. There is also a Practice mode or tool to help
      you manage your aim.
    </p>

    <p><a href="https://www.youtube.com/watch?v=e_E9W2vsRbQ" target="_blank"> Watch the trailer here</a></p>
  </div>

  <!--Agents here-->
  <div class="right mt-250 width-40">
    <h3 class="paraheader">AGENTS</h3>

    <p>
      Valorant is a 5v5 tactical shooter where each player plays as a character called an "agent".
      <br>
      <br> There are currently 15 agents in the game; Astra, Breach, Brimstone, Cypher, Jett, Killjoy, Omen, Phoenix, Raze, Reyna, Sage, Skye, Sova, Viper, Yoru.
    </p>

    <p>
      Each agent has four unique abilities (including ultimate).
      <br>
      <br> So far, the agent abilities range from traditional utility from realistic shooter such as flasbangs and smoke granades but also include magical or futuristic themed abilities like conjuring walls and sonic arrows that act like a radar.
      <br>
      <br> There are some agents that will be available for new accounts while other agents have to be unlocked through progression or battle pass system.
    </p>
  </div>

  <!--Guns here-->
  <div class="left mt-250 width-40">
    <h3 class="paraheader">GUNS</h3>

    <p>
      Valorant has a buy phase at the beginning of each round. Every agent has access to the same guns and shields in their shop.
      <br>
      <br> There are currently 17 guns in valorant; Classic, Shorty, Frenzy, Ghost, Sheriff, Stinger, Spectre, Bucky, Judge, Marshal, Operator, Ares, Odin, Bulldog, Guardian, Phantom, Vandal.
    </p>

    <p>
      Every agent has a primary weapon slot (SMGs, Shotguns, Snipers, and Heavy Machine Guns), a secondary sidearm slot, and a knife.
      <br>
      <br> During the buy phase, players can sell their sidearm or primary, request a teammate to buy a gun for them if they're low on funds, announce that they have extra funds to purchase for a teammate, or tell them to save their money for the round.
    </p>

    <p>
      Guns vary in terms of:
      <ul>
        <li>Primary and alt fire settings</li>
        <li>Damage output (based on head/body/legs)</li>
        <li>Magazine capacity</li>
        <li>Recoil pattern</li>
        <li>Ability to pierce through walls</li>
      </ul>
    </p>
  </div>

  <!--Maps here-->
  <div class="right mt-250 width-40">
    <h3 class="paraheader">MAPS</h3>

    <p>
      So far there are 5 maps with one objective: planting or defending against a bomb called "spike".
      <br>
      <br> The 5 playable maps are:
      <ul>
        <li>Bind</li>
        <li>Haven</li>
        <li>Split</li>
        <li>Ascent</li>
        <li>Icebox</li>
      </ul>
    </p>

    <p>
      Each map also has two ultimate orbs in neutral locations that teams can try to grab. The orb grants one point the ulimate of the agent who picked it up.
      <br>
      <br> Another general thing to note is that some walls and terrain can be fired through. As a rule of thumb, anything that leaves a bullter hole can be penetrated.
    </p>
  </div>

  <!--Shooting Range here-->
  <div class="left mt-250 width-40">
    <h5 class="paraheader">SHOOTING RaNGE</h5>
    <p>
      The last existing map is dedicated to practicing and honing your skills. Here you can change your agent and guns at anytime (you can even teset characters that you do not own yet).
      <br>
      <br> At the shooting range, you can shoot at dummies that spawn at different speeds and settings such as strafing.
      <br>
      <br> There is also an area dedicated to shooting long-distance targets to test the effective range of guns.
      <br>
      <br> Lastly, you can also practice scenarios such as planting a spike and then defending against bots to improve your composure and ability in clutch situations.
    </p>
  </div>
</div>



A: If you add z-index: 1; to .topnav, your problem will be solved. Because, topnav falls under the other contents that comes after topnav such as text, anchor est.

A: The problem seemed to be with the z-index of the navbar. Add a z-index of 99999 to the topnav class like done below:
.topnav {
    position: fixed;
    overflow: hidden;
    background-color: #333;

    padding-top: 10px;
    padding-bottom: 10px;

    top: 0;
    width: 100%;
    z-index: 99999999;
}

that seemed to fix it for me! If it worked mark my anwser as solved and if not let me know!
