Live link is different from the preview and edit. the header with hamburger menu and animations look like broken

Support
1

Issue Summary

EDIT: I’m using Elementor.

Live link is different from the preview and edit. The hamburger menu in the header is fully opened and the icons are very big. It seems like something in CSS (or JS?) doesnt’ work.

I tried to regenerate CSS and data from Elementor > Tools, after that live links works for the first time, but after I click something and change page, I have this problem: Fatal error : Uncaught TypeError: Cannot access offset of type string on string.

If I regenerate CSS and data it works again but once again if i change page I have the same problem.

2

Hi there @stefanomedda - welcome to the Local community! :wave:

Are you by chance using Elementor, Divi or a similar page builder?

Sometimes there are issues with images and the way things display generally over Live Links with Elementor and other similar builders.

There are some suggestions in this thread I would recommend trying:

Let me know if anything in there helps, we’ll get this figured out!

Sam

3

Thank you for your answer, I am using Elementor

1 Like
4

Hi @stefanomedda -

You’re welcome :slight_smile: Let me know if the suggestions in that thread help you out.

Sam

5

I tried, it didn’t change much. these are the screenshots:

this is how the header should be. it’s ok in edit mode and in preview mode.
menuOK

this is how the header is when I use live links

brokenMenu
brokenMenu1227×1320 32.1 KB

When I refresh CSS and data, it works well only the first time, than, if I change page, I see this:

messageError
messageError824×29 4.45 KB

and after that, also the preview mode gives me the same error

6

Hi @stefanomedda

If you view the live link in an incognito window, different browser, or using a cache-busting string (Adding /? followed by any 4 random characters /?1234 for example) does that return it to what you want to see?

7

Hello Nick-B

I tried but I still have the problem

8

Hi @stefanomedda

It sounds like there is still some cache stuck somewhere since it looks normal in the backend but different on your Live Link. As another test can you view the live link on a phone or tablet that’s not connected to WiFi? If it looks normal there, then it could be your caching that is getting in the way.

There are some different things to try and get around network caching. Restarting your device, restarting the network router/modem, or using a VPN connection.

9

the problem remains unfortunately. But it works when I’m in preview mode or edit mode.
It looks like a CSS problem but only when I use live link from local because also some animations don’t work

10

Hi @stefanomedda

When viewing the Live Link, if you look in the console are there any mixed content errors or other indicators of what might not be syncing?

11

Yes, a lot of mixed content errors @Nick-B

12

This isn’t uncommon since Live Links don’t match your Local Site URL (ie: mysite.local), so Local attempts to rewrite these on the fly. Live Links is broadly compatible with many themes, plugins, and custom code snippets. However, some images, front-end assets, or other HTML elements may be missing from your site when viewing it over Live Links. You can try these steps to fix those up:

  • Run the following WP-CLI command
    wp search-replace 'SITEURL' 'LOCALURL' --skip-columns=guid

  • Replace SITEURL with your production URL like https://localwp.com

  • Replace LOCALURL is your Local Site URL like http://mysite.local

  • Trust Local’s SSL certificate

  • Disable certain types of plugins: caching, security, force HTTPS/SSL

If you’re still having trouble, ultimately what you could try and do if you need to share the site is get it into a Demo somewhere. For example, Flywheel has a free 14 day Demo option that you could push it to Demo Site

1 Like
13

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.