Html ve Css Kullanarak Kayan Navbar Yapımı

[COLOR=rgb(184, 49, 47)]Css kodum : [/COLOR]

[CODE=css].navbar-brand{
    transition: all .5s;
}

.navbar-brand:hover {
    color: #e74c3c!important;
}

nav.navbar-container{
    padding: 20px 0 20px 0;
}

#mainNav {
    background-color: transparent;
}

#mainNav .navbar-nav .nav-item .nav-link {
    font-size:14px;
    font-weight: 400;
    padding: 12px 10px;
    letter-spacing: 1px;
    color: white;
    transition: all.5s;

}
#mainNav .navbar-nav .nav-item .nav-link:hover {
    color: #e74c3c;

}

nav.shrink {
    padding: 0;
    background-color: #e74c3c!important;

}

#mainNav .navbar-toggler {
    font-size:12px;
    right: 0;
    padding: 13px;
    text-transform: uppercase;
    color: white;
    border: 0;
    background-color: #e74c3c;
}

nav.shrink .navbar-nav .nav-item .nav-link:hover,
nav.shrink .navbar-brand:hover {
    color: black!important;
}





.navbar-brand.shrink,
.navbar-container.shrink,
.navbar.fixed-top.shrink,
navbar-brand,
.navbar-container{
    transition: .8s;
}

$(document).on('scroll', function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});
const textPath = document.querySelector("text-path");

const h = document.documentElement,
      b = document.body,
      st = 'scrollTop',
      sh = 'scrollHeight';

document.addEventListener("scroll", e => {
  let percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
  textPath.setAttribute("startOffset", (-percent * 40) + 1200)
});