Панель навигации по сайту (часть II) [closed]

С помощью @Manningham в моем предыдущем вопросе мне удалось сделать мой код навигационной панели намного компактнее. Однако я все еще не могу понять некоторые вещи, отсюда и следующий вопрос. Мой код теперь выглядит так, как показано ниже (вот он на CodePen).

То, что меня озадачило:

1. Я изменил nav-link класс к nav-link2, потому что я не могу понять, как переопределить атрибуты стиля Bootstrap 5 для этого элемента. Это сработает, если я добавлю ID к ссылкам, или если я добавлю !important, но не, если я укажу атрибуты по имени исходного класса. Почему это? Разве последние указанные атрибуты css (т. Е. Те, что в моем css) не должны переопределять аналогичные атрибуты, которые были ранее (т. Е. Те, что были в css начальной загрузки)?

2. Почему атрибуты в .nav-link2.is-scrolled-down кажется, применяется только к первому nav-link2 (т.е. «ДОМ»)? В демонстрационных целях я добавил color: red;-attribute, который, как вы можете видеть, применяется только к «HOME». В .nav-link2-атрибуты без .is-scrolled-down прикрепленные к нему, применяются к каждой ссылке.

3. Когда окно свернуто, чтобы быть уже 1000 пикселей, я не могу манипулировать padding- и / или margin-top или -bottom для nav-link2 элементы. Где / как я могу это сделать?

Наконец, что еще я мог бы сделать лучше?

var navbar = document.querySelector (".navbar");
var navbarlink = document.querySelector (".nav-link2");
var navbarbrand = document.querySelector (".navbar-brand");
var IsScrolledDownClass = ("is-scrolled-down");
var ScrollDownClassTreshold = 50;

window.addEventListener ("scroll", function() {
  if (!navbar) return;
  if (window.scrollY >= ScrollDownClassTreshold) {
    navbar.classList.add(IsScrolledDownClass);
    navbarlink.classList.add(IsScrolledDownClass);
    navbarbrand.classList.add(IsScrolledDownClass);
    }
  else {
    navbar.classList.remove(IsScrolledDownClass);
    navbarlink.classList.remove(IsScrolledDownClass);
    navbarbrand.classList.remove(IsScrolledDownClass);
  }
});

@charset "utf-8";
/* CSS Document */
body {
    height: 200vh;
}

.navbar {
  background-color: #105565;
    position: fixed;
    width: 100%;
    }

.navbar-brand {
  color: white;
    font-family: 'Julius Sans One';
    font-style: normal;
    font-weight: 400;
    font-size: 40px;  
}

.navbar-brand:hover {
  color: white;
}

.navbar-nav {
    margin-right: 4.4%;
}

.nav-link2 {
    font-family: 'roboto';
    font-size: 14px;
    font-weight: 300;
  color: white;
    text-decoration: none;
    padding-left: 12px;
    padding-right: 12px;
  padding-top: 28px;
    padding-bottom: 29px;
}

.nav-link2:hover {
    color: #105565;
    background: white;
  padding-top: 28px;
    padding-bottom: 29px;
}

@media (min-width: 1001px) {
    .navbar-brand {
      padding-left: 67px;    
    margin-bottom: 3px;
        margin-left: 1.9%;
    transition: 0.4s;
    }
  .navbar.is-scrolled-down {
    padding-top: 0;
    padding-Bottom: 0;
  }
  .navbar-brand.is-scrolled-down {
    font-size: 28px;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .nav-link2.is-scrolled-down {
    padding-top: 15px;
    padding-bottom: 12px;
  }  
}

@media (max-width: 1000px) {
    .navbar-brand {
        height: 52px;
        line-height: 52px;
        padding-top: 0;
        padding-bottom: 0;
        margin-left: 2.5%;
        transition: 0.4s;
    }
  .fas {
        color: rgba(255,255,255,1.00);
    }
  .nav-link2 {
    margin-top: 15px;
    margin-bottom: 14px;
  }
  .navbar-brand.is-scrolled-down {
    font-size: 28px;
    padding-top: 0.4%;
    padding-bottom: 0.3%;
    height: 40px;
    line-height: 40px;
  }
  .nav-link2.is-scrolled-down {
    padding-top: 15px;
    padding-bottom: 14px;
  }
}

<nav class="navbar navbar-expand-lg m-0 p-0">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar Inc.</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="fas fa-bars"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link2" aria-current="page" href="#">HOME</a>
          </li>
          <li class="nav-item">
             <a class="nav-link2" aria-current="page" href="#">ABOUT</a>
          </li>
          <li class="nav-item">
            <a class="nav-link2" aria-current="page" href="#">PORTFOLIO</a>
          </li>
          <li class="nav-item">
            <a class="nav-link2" aria-current="page" href="#">TEAM</a>
          </li>
          <li class="nav-item">
            <a class="nav-link2" aria-current="page" href="#">CONTACT</a>
          </li>
        </ul>
      </div>
  </div>
</nav>
<script src="script.js"></script>   
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>