Solved Display jumps, and odd header look on post and project pages

Try this: Go to Divi > Theme Options to set up the below settings. After you set that, visit every page of your site & Divi will save a copy of the CSS of each page in file format. The next visit to your page will have the CSS file load first & you don't have to see the 'flashing'.

Try to remove negative margin top & bottom for your section settings. Also remove the height 56px CSS that you add in the top navigation section settings & fullwidth menu module settings.

To make your top navigation smaller in height, try the below CSS in Divi > Theme Options > Custom CSS:

Code:

Log In or Sign Up to view this code.

Not sure which other plugins caused this issue, but try the below CSS in Divi > Theme Options > Custom CSS to fix it:

Code:

Log In or Sign Up to view this code.

After you did the previous steps to remove the negative margin & height, then this part should be fixed as well.

Try the below CSS in Divi > Theme Options > Custom CSS:

Code:

Log In or Sign Up to view this code.

If you have done all above, this should be fixed as well.

 

It's because you added negative margin.

For this: https://staging.projectrozana.org/a-mothers-bravery-inspires/
- Go to the first row settings & remove the negative margin top.

And for this: https://staging.projectrozana.org/an-israeli-shot-me-an-israeli-healed-me/
- Go to the post title module & remove the negative margin top.

For a quick fix, try this CSS in Divi > Theme Options > Custom CSS:

Code:

Log In or Sign Up to view this code.

 

Check out this tutorial by ET: https://www.elegantthemes.com/blog/community/divi-mobile-menu-hack-collapsing-nested-sub-menu-items

 

I see you're using the custom mobile menu section & that's why it didn't work. That code only works for the default Divi mobile menu.

I made some tweak on the code:

Code:

Log In or Sign Up to view this code.

Code:

Log In or Sign Up to view this code.

 

Upon further checking, it's because CPT pages require two additional CSS Class div tags to work (et-boc & et-l).

And Divi is using jQuery to wrap those injected sections that are missing the two div tags. That's why there's a delay in showing the styling, even if static CSS file cache is enabled.

We added some code to fix the delay. If you're using Divi Ultimate Header Plugin, try to re-download & re-install this: https://divi.help/threads/divi-ultimate-header-plugin-v3-0-1.3426/#post-11177

=========

If you are using Divi Powerful Child Theme, then you will need to go to WP Admin > Appearance > Theme Editor > Divi Powerful Child Theme > dp-assets > main-functions.php & look for line 175:

Code:

Log In or Sign Up to view this code.

And replace it with the below:

Code:

Log In or Sign Up to view this code.

It's either using Static CSS File Cache or using preloader plugin to hide your page until it's fully loaded. That's the only 2 solutions available.

As for the Static CSS File Cache, it will generate the CSS file after you or your first guest visitor load the pages. So you may just leave the visiting page task to the first guest visitor.

Let me know if you still have any other questions.

 

For new installation of Divi Powerful, you may re-download v1.1.1: https://divi.help/threads/divi-powerful-child-theme-v1-1-1.3431/
**We already altered the code in that latest version.

This is how Divi works. There's nothing much we can do about it. Alternatively, you can only use preloader to hide your site until it's fully loaded.

 

We just updated the zip file for the same version 1.1.1, as it's only a line of code fix.

Thus, you will need to download it again for v1.1.1 for future installation, which includes the code fix: https://divi.help/threads/divi-powerful-child-theme-v1-1-1.3431/