Jupiter X 1.2.0 FIX for elementor header visual glitch on non-elementor pages


#1

It is fixed in Jupiter X 1.3.0 version.

This is a 1.2.0 temporary cosmetic fix for Custom Headers built in Elementor with Raven widgets.

The visual glitch can be seen on pages that are not built with Elementor (e.g. 404 page) and have Custom Header built in Elementor. While DOM loads one can see completely unstyled raven main menu that renders as plain unstyled list with dot markers, not inline and take much height space.

The reason is that Elementor or Raven plugins enque Raven main styles in body tag instead of head that creates also another problem with css priorities if you added some of your own custom css to style Raven widgets in custom Header some of them might not work if they had same selectors to overwrite default css.

This fix solves the above mentioned problems with css and js. It hides Custom Elementor Header on non elementor pages while the DOM loads and rearranges all css files from body tag back to its’ original locations.

CSS:

body:not(.elementor-page) .jupiterx-header-custom {
    opacity: 0;
}

JS:

(function ($) {
    $(document).ready(function() {
        $('body:not(.elementor-page) #font-awesome-css').insertBefore('#elementor-frontend-css');
        $('body:not(.elementor-page) #elementor-animations-css').insertBefore('#elementor-frontend-css');
        $('body:not(.elementor-page) #elementor-global-css').insertAfter('#elementor-frontend-css');
        $('body:not(.elementor-page) #raven-frontend-css').insertAfter('#elementor-frontend-css');
        $('body:not(.elementor-page) .jupiterx-header-custom').css('opacity','1');
    });
})(jQuery);

Elementor, Raven, Jet styles assets enque in head or body on different pages
Choppy page transitions and preloader