Elementor Perfectly Offset Two Sticky Navigation Containers

Elementor Perfectly Offset Two Sticky Navigation Containers

First, add this JS code to your Elementor page where you want offset navigation containers

This could also be done within a single post template, for example.

Add an HTML element at the bottom of your page or template and paste the following code into it:

				
					<script>
    
document.addEventListener("DOMContentLoaded", function () {
    let prevScrollpos = window.scrollY;
    let headerContainer = document.getElementById("stickyHeader");
    let inContentNavigation = document.getElementById("stickyNavigation");
    let adminBar = document.getElementById("wpadminbar");

    let headerHeight = headerContainer.offsetHeight;
    let adminBarHeight = adminBar ? adminBar.offsetHeight : 0;

    /* set the sticky offset to use the native Elementor sticky offset feature */
    let dataSettings = JSON.parse(inContentNavigation.dataset.settings);
    dataSettings.sticky_offset = headerContainer.offsetHeight;
    inContentNavigation.setAttribute("data-settings", JSON.stringify(dataSettings));

    /* if there is a resize and the headerHeight change, switch to position top to position the inContentNavigation correctly */
    function setHeaderHeight() {
        headerHeight = headerContainer.offsetHeight;
        adminBarHeight = adminBar ? adminBar.offsetHeight : 0;
        inContentNavigation.style.setProperty("--sticky-header-height", headerHeight + "px");
        if (adminBar && window.innerWidth > 600) inContentNavigation.style.setProperty("--sticky-header-height", headerHeight + adminBarHeight + "px");
    }

    let stylesAreAdded = false;
    window.addEventListener("resize", function () {
        if (headerHeight != headerContainer.offsetHeight) {
            setHeaderHeight();
            if (!stylesAreAdded) {
                let styleDiv = document.createElement("style");
                styleDiv.innerHTML = "#stickyNavigation.elementor-sticky--active {top: var(--sticky-header-height) !important;}";
                document.head.appendChild(styleDiv);
                stylesAreAdded = true;
            }
        }
    });

});

</script>

				
			

Now, add the required IDs

Set the ID stickyHeader for your sticky header navigation under Advanced > CSS ID.

Assign the ID stickyNavigation to your sticky container navigation.

Both of them need to be sticky

We’re using Elementor’s Sticky feature for this. Go to each container’s Advanced > Motion Effects and set both containers to sticky: top.

The code will function properly on the front end, but in the editor, the containers will stack on top of each other. To improve the editor view, you can set a sticky offset with a fixed PX value, but this won’t affect the dynamic value applied on the front end.

Do you need an expert? HIRE US NOW!