Elementor, Raven, Jet styles assets enque in head or body on different pages


#1

Elementor, Raven, Jet styles assets enque in “head” tag on page post type edited with elementor. And in “body” tag on system pages like woocommerce cart page. Both pages use cutom “Header” built in Elementor. This messes up with priorities of my custom styles with same selectors, which I include in the bottom of “head” tag. I don’t want to include my styles in body, because I get ugly looking page while it loads. Please, tell me how to make Elementor, Raven, Jet assets to be included in “head” tag on every page.


Choppy page transitions and preloader
#2

I think I have the same issue, all my custom header menus made with Raven are jumping and changing colours as the page loads. And it happens in a different way on woocommerce pages. Any workaround for this?


#3

I checked the source and yes, you are right about it.
As of now, I am not sure if this is something that the theme forces or is it happening because of the Woocommece itself. I will investigate this further though.

But the thing is that all the assets still load in the same order irrespective of the placement.


#4

Ok, then I go to 404 page and these assets are placed in body tag too, so no blame on woocommerce. This is just how assets are enqued for the custom header built with elementor in condition that the page itself is not built with elementor.

I suppose this only affects custom header and custom footer built with elementor.

Creates 2 minor problems:

  • Changes the priority of my cutom css placed at the end of head tag. So there is an unexpected surprise when you have built your custom header on the main page and visited a system page. Can be fixed by !important or more selectors in cutom css rules.
  • Loads global or custom elementor styles after header\footer content is loaded. So it creates an unpleasant visual glitch while the page is loading where you can see your custom header broken.

#5

On the pages built with Elementor, custom header loads Elementor styling colours first, then Raven styling. omg my glitchy headers are driving me crazy! :stuck_out_tongue_winking_eye:
Any tips how to fix this would be very welcome.


#6

Well, due to no oficcial fix I can advice you to copy all nececcary global styles to your cutom css file.


#7

You can go to Elementor -> Settings -> General and disable the default Colors & Fonts.


#8

They have been disabled since the beginnig. There are still styles that gain higher priority over my custom styles.


#9

Workaround is to add some custom css rules that will make header look nice while files attached at the bottom of the page are loaded.


#10

Hi, contorra, as i understand from your answer, you managed to “fix” that choppy menu as the page loads.

Can you provide a more specific css? i’ve pasted what you posted without result.

My WIP website is https://www.calandriamodas.com/inicio

Thanks in advice


#11

I recommend you to use a caching plugin such as Autoptimize or WP Rocket to increase the performance to resolve this issue.


#12

The general strategy of fixing the glitch is to style the header with additional styles. I changed my answer abowe.

V1.2.0 March 1, 2019 has “Bug Fix : Header and footer initial loading glitch”. I haven’t checked it yet. Updating has a lot of issues.


#13

Checked Jupiter X 1.2.0 and it is not fixed still. The following css files are still placed in body tag on pages with elementor header\footer that are not built with Elementor:
frontend.min.css
global.css
post-*.css
I can see menu glitches.


#14

Autoptimize solves the visual glitch, thank you.


#15

But style priorities are still messed up.


#16

Try this fix: