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!
8 thoughts on “Elementor header and footer not displaying correctly?”
Sadly, this has not worked for me. No difference at all, still doesn’t show the header.
I have customized the header and footer in the editor however when I hit Publish the header and footer does not update. Is this the case?
And is anybody even responding to the comments?
D, it’s hard for me to tell what’s causing them not to update. Could be many different things that are specific to your website.
As far as your second question goes, sure. However, I’m not sure what you want us to reply to people saying it’s not working for them. We don’t have the time or resources to offer free support to people, as much as we’d wish we were able to.
It worked for me thank you !
That’s great to hear!
I have the same problem that my menus in header are folded out. It just suddenly became weird. also on mobile version – the menu has already dropped down when loading the page. Please if any suggestion.
I use elementor pro for my header, astra theme. When I recently upgraded my security my menu was suddenly showing up with a strange appearance, not utilizing the designs that were previewing correctly in the editor, and also became unusable. I downloaded really simple ssl as recommended here. This resolved my issue! Thank you =)
Happy to hear we were able to help!