My website features a div that animates in using a jQuery click function, appearing over other divs that have animated in on $(document).ready(). Strangely, this div shows up behind the others only on the home page of my website and not on any other pages, particularly on mobile devices.
Homepage appearance:
https://i.stack.imgur.com/VfFJM.png
Appearance on other pages:
https://i.stack.imgur.com/ZEuzN.png
The difference between these two types of pages is that on the home page, the navigation menu and the loose-leaf div animate in as shown below:
Navigation Menu Animation Code:
setTimeout(function(){
$('#avmenu ul li').each(function(i) {
var $fc = $(this);
setTimeout(function() {
$fc.addClass('flipInBottomBack').css({'pointer-events':'auto'});
}, i*250); // delay 250 ms
});
}, 6000);
The flipInBottomBack CSS keyframe animation starts with opacity: 0 and transitions to opacity: 1.
On the other pages, the animations are triggered differently, for example by removing the animation class for the loose-leaf div. The navigation menu code may look like this:
$('#avmenu ul li').show().css({'opacity':'1'});
I've tried adjusting the CSS index attribute, but even with the homework div having the highest index, it doesn't display correctly on the homepage. What could be causing this issue specific to the homepage?