Remove Spacing Around Elementor Pro TOC Widget

When building your website with Astra Theme and Elementor Pro you might have noticed a larger spacing around the “Table Of Contents” (TOC) widget than needed. 

Astra Theme version 3.6.7 came with the fix for this, but the fix is not applied automatically to existing websites. Learn how to apply it to your website.

Why Do I Need This Improvement?

The additional spacing was created as a result of the Astra theme’s CSS for the default “ul” tag. The tag was affecting Elementor Pro’s TOC widget. 

You can check the following example:

• This is the Elementor Pro TOC widget with Hello Elementor theme:

• And here, you can see how the same widget look when used with the Astra Theme:

Though Astra 3.6.7 update fixes this issue, it won’t be applied automatically to your website to avoid unwanted effects on your existing websites.

How To Fix This?

For all new websites, this fix will be applied automatically when the theme is updated. 

As mentioned, for the existing website, this improvement needs to be activated by adding a filter. This was done to allow you to check how these changes apply to your website and make any changes if needed. 

To apply the improvement to your existing website, you would need to add a filter to the functions.php file of your Child Theme. If you don’t have your Child Theme installed, please check this article on how to do it. Please add the following filter:

add_filter( 'astra_remove_elementor_toc_margin', '__return_true' );

If you are not sure how to add this code, please check this article.