Elementor: Headers that break, solutions [Solved]

If you use Elementor to create your site, including your header and footer, you may already have noticed that, from time to time, their layout breaks. Something like this:

It’s a fairly recurrent bug, and thank goodness it’s easy to fix with the two solutions I’m about to show you.

The cause of the problem

The cause of the problem is quite simple: it’s the blocking of mixed content by your browser that will “break” the layout of certain elements of your site.

Mixed content occurs when a secure web page (HTTPS) contains non-secure elements (HTTP).

Quite simply!

If we click on “Deactivate protection for now”, the site will be displayed correctly.

To put it simply, Elementor will serve certain resources in HTTP (for whatever reason) and not in HTTPS. For security reasons, your browser will not load resources that are not in HTTPS.

Solution 1 (temporary) – Regenerate resources via Elementor

To correct this problem, at least temporarily, simply regenerate the resources and files via the Elementor settings, as follows:

1. Go to the Elementor “Tools” tab.

2. Then click on “Regenerate files and data”.

Although this trick works, it won’t solve the problem once and for all. Your layouts will break again in a while.

So here’s the final solution.

Solution 2 (definitive) – Force HTTPS redirection

To solve this problem for good, all you need to do is force HTTPS redirection on your site. It’s very simple, and only takes a single line in your .htaccess file (accessible via your FTP):

RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

And that’s it! That’s all there is to it. You’ll never have to worry about this again on your Elementor websites 😉

This setting appears by default in OCOPO™, your already configured and optimised WordPress.