The main issue I see is that you’ve got Advisory Right with a z-index of 1 and Advisory Left with a z-index of 0. You’re doing this because you’ve got Advisory Left filling the screen and Advisory Right coming on top of it in order to be visible, but your navbar is INSIDE Advisory Left, which means it inherits the overall z-index of 0, which is below Advisory Right, and all of its contents.
Your element structure is out of whack, which is the main reason you’re having these problems. A simple solution would be to duplicate your navbar element and make one visible only on desktop, and the other only visible on mobile, and move the mobile version OUT of the Advisory Left element, then assign it a high z-index.