How to Fix Elementor Header Conflict

It came to my attention that if you use an Elementor Footer, but not an Elementor Header with Socrates page templates it causes my theme’s header to disappear.

While it’s easy to create virtually any Elementor look using Socrates shortcodes and the customizer I recognize is very popular.

So I tested this and noticed that it also causes the same problem in default WordPress Themes like 2020, 2021, 2017..

There’s a fix I found here which resolves the problem, but I recommend you use a Child Theme if you wish to implement it. We have child themes for each our our themes in the members area.

This code below fixes issues with our Full Width layout.

STEP 1: Add this code to functions.php at bottom.

// GET MY HEADER BACK
add_action( 'elementor/theme/register_locations', function(){
  $elementor_theme_support = \ElementorPro\Plugin::instance()->modules_manager->get_modules('theme-builder')->get_component( 'theme_support' );	
  remove_action( 'get_header', [ $elementor_theme_support, 'get_header' ] );
}, 100);

STEP2: Add this to Additional CSS

.elementor-location-footer {
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
}

#main {
    padding: 50px 0px 0px;
}

If you wish to use a Boxed layout it gets a bit more tricky.

You’re going to need to view the source code for your site, type Ctrl-F and search for data-elementor-id inside the Footer area.

Then add this code in Additional CSS and replace the data-elementor-id number with the one on your site.

.elementor-3610 {
    margin: 10px -50px 0px -50px;}

#main {
    padding: 50px 0px 0px;
}

That should solve the issue. While very few of our customers use Elementor, I will try to make the theme compatible in the next update for this Footer issue.

And if you ever want to just replicate any Elementor feature in Socrates let me know and I can make a tutorial. In most cases I can duplicate the design in a few minutes using our shortcodes.