Я пытаюсь сделать прозрачный нефиксированный navbar в Angular 9, используя bootstrap 4

Question

Моя панель навигации прозрачна, но я не хочу, чтобы она прокручивалась с остальной частью страницы, я хочу, чтобы она была НЕ ФИКСИРОВАНА. Однако, только когда панель навигации не прозрачна, она перестает прокручивать страницу. Например, когда я установил относительное положение в s css, фон становится белым, а панель навигации нефиксированной, но я хочу, чтобы он был прозрачным и нефиксированным

header.component. html

<!--menu-->
<header>


  <!-- As a heading -->
  <nav class="navbar">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </nav>

</header>


<!-- routes will be rendered here -->
<router-outlet></router-outlet>





header.component.scss
    .navbar{
  background-color: transparent;
  background: transparent;
  border-color: transparent;
  font-family: "Uni-Sans";
}
.navbar{    
  position:absolute  !important;//this makes navbar not have a white background
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1;
  overflow: hidden;
  margin: 0;
  padding: 0;

}