Как переместить навигационные ссылки вниз по странице

Question

Каждый раз, когда я пытаюсь переместить навигационные ссылки / навигационную панель вниз примерно на 25 пикселей, интерактивная ссылка остается наверху, однако появляется текст, куда я ее перемещаю, поэтому навигационные ссылки больше не нажимаются. Как я могу переместить панель навигации вниз и убедиться, что фактический текст кликабелен?

Примечание. Я много раз пытался использовать поля и отступы. Ссылки не кликабельны, когда я использую поле.

ОБНОВЛЕНИЕ: проблема связана с анимированным фоном, потому что когда я удалял фон, навигационная панель работала нормально. Я обновил свой пост с кодом для фона.

 .navbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
 background-color: black;
 color: white;
 font-size: 20px;
 }

 .navbar-links ul {
 margin: 0;
 padding: 0;
 display: flex;
 }

  .navbar-links li {
  list-style: none;
  }
  .navbar-links li a {
  text-decoration: none;
  color: white;
  padding-left: 1rem;
  padding-right: 1em;
  padding-top: 1em;
  display: block;
  }

.navbar-links li:hover {
   background: #555;
  }
.animation-area {
background: rgb(22,168,194);
background: linear-gradient(0deg, rgba(22,168,194,1) 0%, rgba(27,28,28,1) 
100%);
width: 100%;
height: 100vh;
} 
 
.box-area{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 97%;
overflow: hidden;
}

.box-area .box-item{
position: absolute;
display: block;
list-style: none;
width: 25px;
height: 25px;
background: rgba(255, 255, 255, 0.2);
animation: animatedSquares 20s linear infinite;
bottom: -150px;
}

.box-area .box-item:nth-child(1){
left: 86%;
width: 80px;
height: 80px;
animation-delay: 0s
   }

.box-area .box-item:nth-child(2){
left: 12%;
width: 30px;
height: 30px;
animation-delay: 1.5s;
animation-duration: 10s;
}
.box-area .box-item:nth-child(3){
left: 70%;
width: 100px;
height: 100px;
animation-duration: 5.5s;
}

@keyframes animatedSquares{
0%{
  transform: translateY(0) rotate(0deg);
  opacity: 1;
 }
 100%{
  transform: translateY(-800px) rotate(360deg);
  opacity: 0;
}
}

   <div class="banner-text">
          <nav class="navbar">
            <a href="#" class="toggle-button">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
            </a>
            <div class="navbar-links">
            <ul>
           <li><a class="navlink" href="#">Page 1</a></li>
            <li><a class="navlink" href="#">Page 2</a></li>
            <li><a class="navlink" href="#">Page 3</a></li>
            <li><a class="navlink" href="#">Page 4</a></li>
          </ul>
          </div>
        </nav>
          </div>
 <div class="animation-area">
        <ul class="box-area">
          <li class="box-item"></li>
          <li class="box-item"></li>
          <li class="box-item"></li>
          <li class="box-item"></li>
          <li class="box-item"></li>
          <li class="box-item"></li>
        </ul>
      </div>  

Answer 1

Попробуйте это

.navbar-links li {
  list-style: none;
  margin-top: 1rem;
 }
.navbar-links li a {
  text-decoration: none;
  color: white;
  padding: .363rem;
  display: block;
 }

Answer 2

Я решил проблему! У меня есть анимированный фон на главном экране, и фон имел position:absolute, который конфликтовал с панелью навигации. Я просто удалил position: absolute; из фона и изменил его стиль.

Если у кого-то есть такая проблема, попробуйте удалить position: absolute; из панели навигации или любой элемент, который может конфликтовать с ним.