Elementor header and footer not displaying correctly?

When building a WordPress site with the Astra template, a popular option is to use the Elementor Header and Footer plugin. This powerful plugin allows you to use Elementor to build headers and footers for the Astra templates. This gives you tons of extra options when it comes to styling your website.

A recent update, however, has lead to problems for many users. The headers or footers are no no longer displaying correctly although they appear to be just fine in the preview.

The cause is some of the CSS files used by the header that are not served over SSL. If you are using a SSL certificate for your website (and who isn’t) the browsers of your visitors are likely to block the CSS file, which has a result that your header will look weird and in many cases straight up unusable.

The solution to this problem is to start serving your files over SSL. One of the easiest solutions to this problem is by installing a plug-in that takes care of this for you. We recommend taking a look at the Really Simple SSL plugin. You can find the plug-in here: Really Simple SSL – WordPress plugin | WordPress.org

Once you activate this plug-in it will handle most SSL related tasks for you, including taking care of the insecure content that is causing the problem you are experiecing.

Let us know in the comments if this little tutorial helped you!

1 thought on “Elementor header and footer not displaying correctly?”

Leave a Reply