Live Link Preview Displaying Website Incorrectly

What issue or error are you experiencing? My Header Menu is displaying incorrectly on both Desktop and Mobile when using the live link preview how can i fix this?


What steps can be taken to replicate the issue? Feel free to include screenshots, videos, etc

These are what the menus are supposed to look like


correct menu - mobile
THese are what the menus look like when viewed through live link.
incorrect menu-mobile


System Details

  • Local Version: 7.1.2+6410

  • Operating System (OS) and OS version: Windows 10 64 bit


Local Logs

Attach your Local Logs here (Help Doc - Retrieving Local’s Log)
local-logs.zip (75.7 KB)


Security Reminder
Local does a pretty good job of scrubbing private info from the logs and the errors it produces, however there’s always the possibility that something private can come through. Because these are public forums, always review the screenshots you are sharing to make sure there isn’t private info like passwords being displayed.

Hi @kevinho

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. Try the tips below:

  • 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 issues you might open up the console of the page and see what errors are present. Is it still showing some mixed content or some other type of issue?

You might try viewing it in an incognito window, a different browser, or over LTE Data instead of WiFi to see if caching is getting in the way.

As a last-ditch option, you could try pushing the site up to a Demo to see how it looks there. Flywheel offers free 14 day Demos that you could test out: Demo Site

Hi Nick,

Thanks for the tips, by any chance would you happen ot have any images of videos explaining this? I am fairly new to web design and have never used the wp cli before.

These articles might be helpful in breaking things down and offering some solutions that might help:

As a first step, you might check your console first to make sure there are Mixed Content or Insecure errors. Otherwise it might just be a browser caching issue or caching with a theme or plugin.

Thanks so much! The SSL Insecure Content Fixer seems to have fixed the issue. I’m not sure if this is the place to ask but do you have any recommendations or resources for a holistic approach to learning front end website design? Reading different articles here and there seems to leave gaps in my knowledge.

1 Like

I can definitely understand how daunting it can be. Part of the problem is there is just so much to learn so it’s tough to start small and get a clear view of everything.

The articles I shared above came from WPBeginner who we really recommend as a resource for both learning and help with troubleshooting along the way.

If you’re looking for something more like tutorials or instructional videos you might have to do some searching on YouTube or if you have access LinkedIn Learning.

Some great resources for coding would be https://www.codecademy.com/ or https://www.freecodecamp.org/.

There is a lot out there in the world over and above what I’ve shared so you may just have to do some searching and find what works best for you! Good luck and happy developing :slight_smile:

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