Solution to page load rendering problem – css stylesheet not loading on header

Solution for those having the following problem

When loading the page that contains the form, the initial rendering (the way it looks) is missing the css styling and then when the page finishes loading the right css styling shows up and all is good. It’s like a glitch and you can check it out by doing an F12 con chrome’s browser. The problem is due to ninja forms not loading the css stylesheets on the header but on the body part of the html document, so browser shows the glitch till it catches up.

The patch goes in your theme’s funtions.php file, usually located at/wp-content/themes/your-theme-name

Do a back up of the existing file just in case, and paste this code at the very end of whatever is there.
Make sure the “add_action(‘wp_enqueue_scripts’, ‘enqueue_this_ninja_script’);” is the last line, don’t add a blank space case it will case an error.

Hope this was helpful, I had to write it myself cause I couldn’t find the right solution anywhere, although this link was a start
Note: this text editor is a bit too small I hope it respects the text hierarchy after publishing.

// Load Ninja forms css files on header instead of body * fixing the current problem *
function deregister_this_ninja_script () {
wp_deregister_script( ‘ninja-forms-display’ );
wp_deregister_script( ‘jquery-qtip’ );
wp_deregister_script( ‘jquery-rating’ );
wp_enqueue_style( ‘ninja-forms-display’, NINJA_FORMS_URL .’css/ninja-forms-display.css?nf_ver=’ . NF_PLUGIN_VERSION );
}
add_action(‘wp_deregister_script’, ‘deregister_this_ninja_script’);

function enqueue_this_ninja_script () {
wp_enqueue_style( ‘ninja-forms-display’, NINJA_FORMS_URL .’css/ninja-forms-display.css?nf_ver=’ . NF_PLUGIN_VERSION );
wp_enqueue_style( ‘jquery-qtip’, NINJA_FORMS_URL .’css/qtip.css’ );
wp_enqueue_style( ‘jquery-rating’, NINJA_FORMS_URL .’css/jquery.rating.css’ )

}
add_action(‘wp_enqueue_scripts’, ‘enqueue_this_ninja_script’);

https://wordpress.org/plugins/ninja-forms/