Elementor Perfectly Offset Two Sticky Navigation Containers

In this tutorial, I will show you how to perfectly offset two sticky containers with Elementor.

This is useful for when you have your primary header template, that is sticky, and then in a single page template, you have another navigation menu, that you also want to be sticky.

Adjusting the offset feature under the Elementor container > Advanced > Motion effect > Sticky offset doesn't give perfect results.

On different screen sizes, your header has a different height. So then the offset isn't accurate anymore.

With the method in this tutorial, these will be perfectly offset, no matter the changing height of the header. We are using JavaScript to dynamically calculate the height of the header, and to set this as offset to the sticky container.

Here is a live demo (scroll down) :

Here are a few advantages of this technique rather than relying on Elementor's "sticky offset" option, which accepts PX only.

Advantages of this method:

• If you don't have a set height on your header container, but instead are using padding for spacing, then this makes it automatically work, even if at some point the rendered height changes (maybe a change in padding value, an addition of a CTA button, etc).
• If your menu items text size is in REM instead of PX, which would be good practice, and the user has increased his browser font size setting. Then the height of the header would adjust to accommodate the larger text, so having a set offset in PX would not quite work, and they would probably stack. This would prevent this issue, so it's good for Accessibility.
• Say you have many menu items, and on smaller laptop screens, they break into two lines, creating a ugly header with a two line nav. Then the height would be greater than the set PX offset, and having JavaScript set the offset dynamically would still prevent stacking and make it stick exactly where needed.

The navigation images in the live demo are made with the WordPress Menu element, you can do the same with the Elementor Horizontal Scroll Menu, Taxonomy, Tabs With Images Premium tutorial. This is what that premium tutorial shows you:

Features from that premium tutorial:

• Great UX: Automatically scrolls to the center of the clicked item
• PageLoad Smart: Automatically scrolls to the center of the current menu item (if one of them is the current page), current taxonomy filter, or current tab
• Open Tab: Scroll to and open the proper tab on page load through an ID in the URL (site.com/#example-id)
• Auto Scroll Back Up: On Tab Switch, automatically scroll back up to the top of the tabs element. Useful if your tabs titles are sticky

Back to the current tutorial:

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

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

Add an HTML element at the end of your page or template, and copy paste the code in it:

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Perfectly Offset Two Sticky Navigation Containers tutorial 
 * Found at this URL https://element.how/elementor-offset-two-sticky-navigation-containers/ 
 */ 
</script>

Now, add the required IDs

Your sticky header navigation will need the ID stickyHeader under Advanced > CSS ID:

Your sticky container navigation will need the ID stickyNavigation

Both of them need to be sticky

We are using the Elementor Sticky feature for this, so under the container > Advanced > Motion Effect, both containers need to be set to sticky: top;

The code will only work on the front end, so in the editor, they will be stacking on top of each other. You can set a sticky offset with a fixed PX value to at least improve the editor view, it won't change the dynamically set value on the front end.

Finally, enjoy your Elementor perfectly offset sticky containers!

I hope you have enjoyed this tutorial!

Cheers!