Design Header und Navigation

<script data-relocate="true">
function resizeHeaderOnScroll() {
  const distanceY = window.pageYOffset || document.documentElement.scrollTop,
  shrinkOn = 50,
  headerEl = document.getElementById('pageHeaderFacade'); 
  if (distanceY > shrinkOn) {
    headerEl.classList.add("smaller");
  } else {
    headerEl.classList.remove("smaller");
  }
}
window.addEventListener('scroll', resizeHeaderOnScroll);
</script>

<script data-relocate="true">
function resizeHeaderOnScroll() {
  const distanceY = window.pageYOffset || document.documentElement.scrollTop,
  shrinkOn = 50,
  headerEl = document.getElementById('pageHeaderLogo'); 
  if (distanceY > shrinkOn) {
    headerEl.classList.add("smaller");
  } else {
    headerEl.classList.remove("smaller");
  }
}
window.addEventListener('scroll', resizeHeaderOnScroll);
</script>

.pageHeaderFacade.smaller > .layoutBoundary {
  align-items: center;
  padding-bottom: 0px;
  padding-top: 0px;
  transition: all 0.5s ease 0s;
}

.pageHeaderFacade > .layoutBoundary {
  transition: all 0.5s ease 0s;
}

.pageHeaderLogo.smaller > a .pageHeaderLogoLarge {
  align-items: center;
  width: 140px !important;
  height: 20px !important;
  transition: all 0.5s ease 0s;
}

.pageHeaderLogo > a .pageHeaderLogoLarge {
  transition: all 0.5s ease 0s;
}

.pageHeaderContainer {
  position: fixed;
  left: 0;
  right: 0;
}

.pageNavigation {
  margin-top: 170px;
}