Bricks: Jak vytvořit fixní (sticky) menu při scrollu?

Bricks builder má tu výhodu, že v template pro header jde v settinngs nastavit fixní header, čili žádný stres, je to jednoduché. Co ale dělat, když nad menu je ještě nějaká informativní lišta? U jednoho klienta tam máme například kontakty, sociální sítě aj. Když tedy nastavím celý header jako fixed, tak se se scrollem zobrazuje i lišta, což zbytečna zabírá moc místa. Jak to tedy řešit?

Osobně jsem to vyřešil pomocí JS kódu. Dané sekci, která má být fixnuta, jsem přiřadil class .ap-sticky-menu. Následně jsem do snippetů vložil tento kód, který při scrollu k této class přidá ještě navíc .sticky.

document.addEventListener("DOMContentLoaded", function () {
    const stickyMenu = document.querySelector(".ap-sticky-menu");

    if (!stickyMenu) return;

    const offset = stickyMenu.offsetTop;

    window.addEventListener("scroll", function () {
        if (window.scrollY >= offset) {
            stickyMenu.classList.add("sticky");
        } else {
            stickyMenu.classList.remove("sticky");
        }
    });
});

Následně stačí přidat tyto css. Já osobně sticky menu přidal jen na mobilní verzi, proto je to omezeno na media s max width 478 px.

@media (max-width: 478px) {
    .ap-sticky-menu.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
   }
}