Update 1/31/2018:
I finally got it worked out… at least for now, with help from a support ticket at Avada. The Dynamic js/css settings need to be set to compile the js, and set the css to “file”. In the child theme, change your functions php file to this:

function theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'fusion-dynamic-css' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Hoping this is a lasting solution!

Update 11/2017:

This no no longer working on some sites in Avada 5.2.3. One thing they’ve recommended in the forums is to override their styles with an ID; usually #wrapper will work.

If you’re like me and find that extra tag annoying, or not always working to your satisfaction, you can load your style sheet in the header as a link. Leave the function same as below – because now your child style simply won’t load. View your source and copy a style sheet link, editing to your site’s specs.

Insert this in your header js options in the Advanced Code Fields/tracking tab to load just before the closing header.

Why not just use their custom.css? Because it vomits style code all over every page, which has to be read by the browser before it will display. Milliseconds… but every one counts.

Update 10/2017:
This plugin I previously recommended is no longer updated. It did so many amazingly cool things – but now I’ve seen that it is causing problems with the more recent versions of WordPress.

But all is not lost! There is still a way to have your Child theme style sheet load after the Avada and fusion style sheets.

Go into your Avada child theme under Appearance, Editor. Navigate to functions.php. Be sure to have another method to access this file (ftp or cpanel) in case you make a mistake- it will take down your site.

Change the array where it says
array( 'avada-stylesheet' ) );
change it to
array( 'fusion-dynamic-css' ) );

Save file. That’s it!


Update 09/23/2023

A reply below indicated that if you want to see styles using the ‘Live’ builder, you’ll need to add the style sheet again to your function file:

“To fix the Live-Builder issue, you need to enqueue the same stylesheet again (under a different name/handle, CSS filename can stay the same) and use: array( ‘avada-stylesheet’) as a dependency.

“Example:

wp_enqueue_style( ‘childtheme-style’, get_stylesheet_directory_uri() . ‘/style.css’, array( ‘fusion-dynamic-css’) );
wp_enqueue_style( ‘childtheme-style-fusionbuilder’, get_stylesheet_directory_uri() . ‘/style.css’, array( ‘avada-stylesheet’) );

“And no, the stylesheets don’t get loaded twice, as Avada seems to be using separate handles on the front and back end. It works perfectly for me.”

I haven’t tried it personally but will take Filip’s word for it! Thanks Filip!


I’ve noticed in the forums, there are a lot of questions regarding the style sheet of the child theme not affecting the output. Their response is to use the theme options custom css. I don’t like to use it that much because it spits out the css on the page rather than keeping it in a file.

If you look at the source code, you can see that your child theme style.css is very high up on the page before several other style sheets. But there is a neat cure for this. Re-Order.

https://wordpress.org/plugins/re-order-css-and-js-loading-order/

It’s a little unintuitive at first. Where it says

Reset Scripts and Stylesheets

Do this first after activation – May require up to 10 seconds

Go ahead and click, ignoring the buttons above for scripts. You will be presented with a list of all your styles in the order they are loaded, and all you have to do is find the child style sheet and drag it to the bottom of the list. The hit ‘save new order’ in the blue button.

You might have to do it again after installing other plugins that have their own style sheets.