Now available: ✨ OCOPO™ Discover ✨

Elementor: Headers that break, solutions [Solved]

elementor header cassé solution

Écrit par :

Adrien Bur

Intro

Is your header created with Elementor broken? Here are my best fixes.

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:

elementor header broken on mobile
A broken Elementor menu
The same menu, but on desktop

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!
blocking-mixed-content
Firefox tells me that items have been blocked.

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.

L’article vous a plu ? Partagez-le :

Twitter (X)
LinkedIn
Facebook
Pinterest

Cet article a été rédigé par

Adrien

Leave a Reply

Your email address will not be published. Required fields are marked *