html,
body {
  scroll-padding-top: var(--header-height, 0); /* set to the height of your header dynamically via init JS */
}

/* Headroom base styles */
.headroom {
    top: var(--admin-bar-height, 0); /* --admin-bar-height set by headroom-init.js */
    left: 0;
    right: 0;
    z-index: 9999;
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    position: fixed;

    &.headroom--pinned {
        transform: translateY(0%);
    }

    &.headroom--unpinned {
        transform: translateY(-100%);
    }
}