I’m facing a issue with my WordPress site where the header displays some issues, for example: the logo is huge and the menu links are stacked, as if some css code is missing. The peculiar thing is that when I use the ‘Customize’ view (accessible via the WordPress admin bar), everything looks as it should… I don’t know how it’s possible since that I should be editing a live version of the site when changing the setting in "Customize".
I’m using the latest WordPress version. My theme is Startor and it uses Elementor/Pro.
I suspect this is a conflict with a theme plugin (startor-core) but I don’t know where to look for error messages regarding what’s happening.
I would appreciate any guidance. Thank you!
The chrome dev console shows no errors regarding that.
I’ve cleared all caches, including CDN.
3
Answers
Can you please enable the WordPress DEBUG mode.
Enable WordPress debugging:
Enable WordPress debugging by editing your wp-config.php file. Set define(‘WP_DEBUG’, true); and check for any error messages on the front end.
Plugin Conflict: Deactivate all the plugin and then activate these one by one and then see if the website is look’s fine. And figure out which plugin causing the issue. Also please check the customization button is on publish mode not on save as draft,
Thanks
You should try to create a new website.
Install theme is Startor and it uses Elementor/Pro.
Add your logo.
And go live with that version to see how it works.
Continue diagnose.
If your WordPress site looks correct in the "Customize" view but not on the live site, there are a few potential reasons for this discrepancy. Here are some steps you can take to troubleshoot and resolve the issue:
Clear Browser Cache:
Sometimes, the browser cache may be causing the issue. Clear your browser cache and then refresh the live site to see if the changes take effect.
Update Permalinks:
Go to "Settings" > "Permalinks" in your WordPress dashboard and click "Save Changes" even if you haven’t made any changes. This can refresh your site’s permalinks and sometimes solve display issues.
Check for Theme or Plugin Conflicts:
Disable all plugins and switch to a default WordPress theme (such as Twenty Twenty-One). If the issue is resolved, reactivate your theme and plugins one by one to identify the conflicting item.
Verify CSS and JavaScript Files:
Check if your theme or a plugin is enqueuing CSS or JavaScript files incorrectly. Look at the page source code in your browser and see if there are any errors related to missing or malformed files.
Inspect Browser Console for Errors:
Open your browser’s developer tools (usually by right-clicking on the page and selecting "Inspect" or "Inspect Element," then going to the "Console" tab). Look for any error messages that might provide clues about what is going wrong.
Check Server Logs:
Check your server error logs for any PHP or server-side errors. You can usually find these logs in the cPanel or by accessing them directly on the server.
Review Theme Options and Custom CSS:
If your theme has customization options or custom CSS, review them to ensure there are no conflicting styles affecting the live site.
Update WordPress, Theme, and Plugins:
Ensure that WordPress, your theme, and all plugins are up-to-date. Outdated software can sometimes cause compatibility issues.
Check for Content Visibility Settings:
In the WordPress Customizer, check if there are any visibility settings or conditional controls that might affect how content is displayed on the live site.
Test on Different Browsers:
The issue may be browser-specific. Test your site on different browsers to see if the problem persists across all of them.
Contact Theme or Plugin Support:
If the issue persists, contact the support team for your theme or any relevant plugins. They may have insights or provide specific solutions for your setup.
By systematically going through these steps, you should be able to identify and resolve the issue causing the discrepancy between the "Customize" view and the live site.