nav-bar и карусель-подпись на нем

Question

 #slider {
     width: 100%;
 }
 .carousel-caption{
     top: 50%;
     transform: translateY(-50%); 
     bottom: initial!important;
     
 }
 .carousel-caption h5{
    color: rgb(0, 0, 0); 
    font-size: 42px;

 };

<div class="carousel-item">
 <img src="images/image2.jpg" class="d-block w-100" alt="Loading">
           <div class="carousel-caption"> 
                  <h5>How To Make A Website</h5>
                </div> 
              </div>

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

#slider {
     width: 100%;
 }
 .carousel-caption{
     top: 50%;
     transform: translateY(-50%); 
     bottom: initial!important;
     
 }
 .carousel-caption h5{
    color: rgb(255, 255, 255); 
    font-size: 42px;

 };