I am pretty much done with this page, but I realized that the interactions in the nav bar change according to the page I navigate into. For example, the underlay stops animating, the drop down menu does not display on hover. They all work great at home, but not so well on the other pages. Weird thing is this is a symbol, and is the same symbol I use in the pages where it works.
I’ve checked everything I know: symbols, instances, etc, but I haven’t been able to figure out how to make this nav bar to behave the same throughout all the pages.
Is your intended effect to load your Page Triggers on your navbar symbol each page load every time you insert the symbol on a new page?
Page Triggers do not automatically carry over on Symbols
You must use element trigger.
If you must simulate Page Load on element trigger, assign page scroll and insert following autoscroll on load code:
'script>
$(document).ready(function(){
var scroll = $(window).scrollTop();
scroll = scroll + 1; //pixels to scroll
$(‘html, body’).animate({
scrollTop: scroll
}, 10); //scroll speed in ms
When applying IX2 to SYMBOLS, you must CLASS target all elements in your IX2 panel to avoid duplicates / to have same IX2 experience everytime you insert your IX2 symbol. Be sure to use proper all, parent, sibling, child assignment to avoid conflicts multiple instances of Class Name, if unsure use only Unique class names for IX2.
If you do not assign all CLASS targets on symbol IX2 yu may get duplicate interactions and/or unpredictable results when pasting the SYMBOL to a new page.
Here is example of header scroll effect from 0% (top) to 100% (footer bottom) that works on all pages with one symbol, same effect can be achieved using Page Load (autoscroll), scroll, tap, or hover triggers. - You can look at how the Class assign structure is laid out for the navbar on this page for ideas.
Thank you very much miekwave! Appreciate the answer.
I am in fact using element triggers for my nav bar.
The problem is that this triggers do not get carried out to all the pages where this symbol (nav bar) is present. So, I have a navbar that displays the dropdown menus, and if I go no another page, the same navbar will appear, however, this time, no hover effect and dropping down of the menus happen.
