How to shrink navbar vertically when scrolled down?

Question

Here\'s the css of the navbar before it shrinks:

.navbar{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: fixed;