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:
Now, add the required IDs
Set the ID stickyHeader for your sticky header navigation under Advanced > CSS ID.
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.