Blog

How To Fix Custom CSS Not Working [5 Ways]

How to fix custom css not working

Table ofContents

A common issue in Elementor is that your custom CSS might sometimes not work. So, If you are looking for how to fix custom CSS not working, you are in the right place.

While Elementor Pro lets you use custom CSS script to add more style to your pages, a tiny mistake can block the code from operating.

As a new user, the problem might be very frustrating, but we got your back.

We’ve compiled some key solutions to address the notorious “elementor CSS not working” issue, ensuring your site maintains its aesthetic appeal.

Why Is My CSS Not Working?

There could be several reasons why your CSS is not working. Here are some common reasons:

Syntax Errors

CSS has a specific syntax, and even a minor error can prevent your CSS from working. Double-check your code for any syntax errors.

Specificity

If two or more CSS rules target the same element, the one with higher specificity will take precedence. Make sure your CSS selectors have the correct specificity.

Cascading Order

CSS rules are applied in a specific order, with later rules overriding earlier ones. Make sure your CSS is loaded in the correct order.

Conflicting Styles

If there are conflicting styles for the same element, only one style will be applied. Check if there are any conflicting styles that are preventing your CSS from working.

Caching

Sometimes, your site cache may affect a lot of things in the backend.

If your website is cached, it may not reflect the changes you made in your CSS. Clear your browser and server cache to ensure that your changes are reflected.

How To Fix Custom CSS Not Working?

If you’re a web developer who is familiar with custom CSS, you know how frustrating it can be when changes you make don’t appear on your site.

For a beginner developer, that would bring more pain to the problem.

It can be quite challenging to identify why the CSS is not working as expected. Here are some common solutions to fix custom CSS issues.

Regenerating CSS

The first solution to try is to regenerate your CSS. 

You can easily do this by going to WP admin > Elementor > Tools > Regenerate CSS

How to regenrate css in Elementor

After that, you should clear both the WP and browser cache, then refresh the page. This will help the browser load the updated CSS.

Clearing Site Cache

Another possible issue could be site caching. Check if you have any caching plugins or server-level caching enabled on your website. If so, clear those caches, and try refreshing the page.

Clearing Browser Cache

Sometimes the problem could be with your browser cache. Try clearing your browser cache or viewing the site in a private or incognito window. This will ensure that the browser loads the latest version of the website.

Theme Compatibility

If you’ve tried the previous solutions and the CSS is still not working, the issue could be with your website’s theme. 

Sometimes custom CSS doesn’t work well with certain themes. Try switching to the default theme of WordPress, such as Twenty Twenty-One, and see if the problem is resolved. 

If it doesn’t fix the issue, you can contact the developers of your current theme and ask for assistance.

Multiple Builders

Finally, if you’re using another page builder alongside Elementor, it could be overriding the content you’ve made with Elementor. 

This can prevent the CSS from displaying changes. 

To solve this issue, save the template, and then add it to a new page. Hopefully, this will resolve the problem with page builder overrides.

Finally

Have you tried these solutions above and fixed your Custom CSS issues?

If yes, we are glad that we could help you.

Or you can share your issue with us if the mentioned troubleshoots don’t fix the Elementor custom CSS not working problem on your site.

If nothing works, it is better to contact the Elementor team as it can be an issue from their side too.

If you are a beginner and looking to customize your WordPress website, you can follow our beginner’s guide.

Frequently Asked Questions

Why is Elementor Regenerate CSS Not Working?

If you are trying to add custom CSS and it is not working, there might be some reasons. You need to find the issue and fix it as soon as possible to get it going.

  • Check if you have selected the correct site in the Elementor editor.
  • Make sure that the “Enable CSS regeneration” option is turned on in the Elementor settings.
  • Try clearing your website cache and browser cache to ensure that you are viewing the latest version of the website.
  • Check if any other plugin or theme is conflicting with Elementor
Why is Woocommerce CSS Not Working In Custom Themes?
  • Make sure that you have correctly linked your custom theme with Woocommerce. You can do this by adding the following code in your theme’s functions.php file: add_theme_support( ‘woocommerce’ );
  • Check if the CSS selectors used in your custom theme are correct and match the Woocommerce template files.
  • Try disabling other plugins and switching to a default WordPress theme to check if the issue is with your custom theme or some other plugin.
How To Add Custom CSS To WordPress?

You can add custom CSS to WordPress in several ways:

  • Adding the CSS to the style.css file of your child theme (recommended if you have one).
  • Using the Additional CSS option in the WordPress customizer (Appearance > Customize > Additional CSS).
  • Use a plugin such as Simple Custom CSS and JS or WP Add Custom CSS.
Z-Index Not Working CSS

If the z-index is not working as expected, try the following:

  • Check if the elements that you want to stack have a position property set (relative, absolute, or fixed).
  • Ensure that the elements you want to stack have different z-index values.
  • Check if any parent elements have a z-index value set that is affecting the stacking order of the child elements.
Where Is Custom CSS In WordPress?

In WordPress, you can add custom CSS using the Additional CSS option in the WordPress customizer.

To access it, go to Appearance > Customize > Additional CSS.

CSS Custom Font Not Working

If a custom font is not working, try the following:

  • Check if you have correctly linked the font files in your CSS using the @font-face rule.
  • Make sure that the font files are in the correct format and are located in the correct folder on your server.
  • Ensure that you have specified the correct font family name in your CSS.
  • Try clearing your browser cache to ensure that you are viewing the latest version of your website.
Elementor Custom Code Not Working

If your custom code isn’t functioning in Elementor, check for syntax errors, conflicts with other scripts, and specificity of CSS selectors. Enable Elementor’s Safe Mode, deactivate plugins/themes causing conflicts, and clear cache. Ensure you’re using the latest Elementor version. If issues persist, contact Elementor support for assistance.

How To Add Custom JS In Elementor Page?

To add custom JavaScript in Elementor:

  1. Open your page in Elementor.
  2. Add an HTML widget.
  3. Paste your JavaScript code.
  4. Update or publish the page.
  5. Test your JavaScript.

Share this post to your social media

advanced divider
Picture of Shamima Nasrin
Shamima Nasrin
Shamima Nasrin is an accomplished Senior SEO Content Writer and Content Manager in the WordPress Arena. Skilled with over 5 years of experience, her expertise lies in crafting compelling, high-quality content that drives conversions and resonates with target audiences.

Leave a Reply

Over 300,000+ Readers
Get fresh content from Bdthemes
Subscribe tonewsletter

Get Tips & Tricks, Updates, Fresh Blogs & Offers.

No spam messages. Only high-quality information that you deserve.

Explore OurProduct

Table of Contents

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge