Header navigation bar color transition and navigation pinning on scroll NOT working when Cloudflare is enabled.
If you go to our development site the header top navigation bar is working to allow the main top color bar to fade to 0% opacity behind the buttons and logo. Then when you scroll, the top navigation bar pins to the top of the browser and the color bar behind the navigation comes back to 80% opacity.
On our live site right now, with Cloudflare turned on, this is all broken. The top bar of color does not fade to 0% opacity and the navigation bar does not pin to the top of the browser.
Once I click “Disable Cloudflare on the Site” in the bottom right of CF dashboard, the site will work properly again in about 3 minutes and a browser cache clear.
Why would this be happening? We are using Elementor for the programming of the entire site. We also use WP-Rocket for speed optimization, but I have disabled that plugin using “Safe Mode” and the site still has the same issue. This is a Cloudflare issue messing up our code somehow.
Please help.