Cloud library header templates and nav bar not displaying properly

The custom cloud library header and navbar are not displaying properly on my website https://lucascharnyai.com/.
I’m having the following issues:

1 – The mobile navbar menu button is not working. When using the default template or the custom cloud header, the website content just zoom out a little and become not clickable or sometimes it makes all the page elements disappear except for the footer. Screenshots: https://www.screencast.com/t/8rcnFpGL

2 – The sticky navbar is not appearing with the default header and the custom header. I have set the navbar to be sticky in the theme panel and in the tagdiv composer for the custom header. But it doesn’t work on desktop and mobile. The sticky navbar appears normally only when editing the header on the tagdiv composer.

3 – There is a display issue with the custom cloud library headers (I’m using the edited template 11 for the homepage and template 2 for the rest): the menu itens, the submenus and the background header image I have set are hidden. When editing in the tagdiv composer, everything appears normally. Screenshots: https://www.screencast.com/t/oo73UvYi6oIp

4 – There is a display issue with the sharing buttons on blog posts: they have no opacity. I have followed the steps in the post https://forum.tagdiv.com/topic/social-media-sharing-buttons-are-not-visible-in-blog-posts/ and selected the social media I wanted. The buttons are now there, we can click and share normally, but we can’t see the buttons. Also, the “+” button doesn’t work. Screenshots: https://www.screencast.com/t/SWCoItzc2AJ8
Blog post example: https://lucascharnyai.com/como-aumentar-a-lista-de-arquivos-recentes-do-photoshop/

That’s it. I have tried deactivating all plugins (only left the tagdiv composer, cloud library and standard pack activated), cleared the cache, but nothing worked. I don’t know if it’s relevant, but I have installed the Newspaper theme for the first time using the current version. I previously was using the old ionMag free theme.

Please help! Thank you!

I too have the same issue listed as #1 on the original post. This recently started happening. I was thinking it had to do with caching of the CSS/javascript. For me, it’s complicated to troubleshoot as I have many plugins as well as use CloudFlare, WP Rocket, and MaxCDN. Sometimes when I clear the caches/CDN, it fixes but then the issue happens on Safari, Chrome, Firefox, and Edge.

It would be great to understand the environments where people are having this issue (as I have seen other threads about this same thing – screenshot of #1 shows exactly what I am experiencing). Caching plugin? CloudFlare? CDN?

My site is https://hightechdad.com (but I’m continuing to troubleshoot so it may work or it may not).

Thx!

Hi Vlad,
Thanks for the response. If this were isolated to just my production environment, that would be a quite logical approach to troubleshooting. However, I have seen many other threads in the support form (like this one) that talk about the same issue happening. I could search and link to them but I’m sure your team is well aware of them.

Interestingly, the search icon on the mobile version works as expected, sliding out from the right. It’s just the hamburger menu which is acting incorrectly (as Lucas above indicated through screenshots and which I confirm is happening on my site as well).

So, I’m trying to see if there are any commonalities between our environments, something that might indicate a conflict or issue. Off the top of my head, the possible conflicts I could see are:
– Using WP Rocket (caching)
– Using Cloudflare
– Using JS/CSS minification (do we need to exclude certain object from this)
– Using Jetpack
– Using a CDN

Unfortunately, setting up a staging environment (which I have) using CloudFlare, CDN, and JetPack would require paying for those services on a separate instance and are cost-prohibitive. In my staging (without those items), everything performed as expected, btw.

Hope this helps (you and others as well).

-HTD

Hi Vlad,

No worries. As a work around for now, I have change the setting to use the mobile theme only for AMP (which seems to be ok). And since Newspaper is nicely responsive, the pages look fine for now. I will keep watching for updates. (But I wasn’t the person who opened this thread so don’t close it as they may have more questions.)
-HTD

Hi! Thank you a lot for the help!

What was causing the issues I have mentioned was a pointless JQuery library I was loading using the Newspaper Theme Panel. I deleted this line of code and now everything appears as they should!

The only thing that is bothering me now is that when I use the custom header from the cloud library, the navbar menu links and the header’s background image load using a lazyload effect fade transition, even if I set the option to not apply the Newspaper’s lazyload effect to the site.

This causes the navbar’s links and header’s background take a little longer to load than the rest of the page. When using the default headers (so, not using the cloud library headers) these elements loads instantly (as I want the custom header to). What could be causing it?

Thank you!