Vytvořil jsem nový web pro mého grafika!

Bricks: Jak nastavit padding u obsahu při fixed menu

0 komentářů
function adjustMainPadding() {
    // vyber spolehlivý root header (zůstává stejný na desktopu i mobilu)
    const menu = document.querySelector(".ap-header"); // zde je potřeba přidat class vašeho menu
    const main = document.querySelector("main"); // zde je potřeba přidat tag, kde začíná váš main obsah

    if (menu && main) {
        const menuHeight = Math.round(menu.getBoundingClientRect().height);
        main.style.paddingTop = menuHeight + "px";
        console.log("Výška menu nastavena na:", menuHeight + "px");
    } else {
        console.warn("Header nebo <main> nebyl nalezen.");
    }
}

// spustí se po načtení
window.addEventListener("load", adjustMainPadding);

// spustí se při změně velikosti nebo otočení displeje
window.addEventListener("resize", adjustMainPadding);
window.addEventListener("orientationchange", adjustMainPadding);

// pro případ, že Bricks v mobilu přepíše DOM (menu výška se změní později)
const obs = new MutationObserver(() => adjustMainPadding());
obs.observe(document.body, {childList: true, subtree: true});
Máte dotazy či potřebujete pomoc?
V případě dotazů mi napište níže komentář, rád vám odpovím a navedu vás. Komentář mi můžete napsat i v případě, že vám článek pomohl nebo se vám líbil, určitě to potěší. 🙂

Podobné články

Zanechte mi komentář