1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

How to stop header jumping ?

Discussion in 'Basic Support Forum' started by Fabrice, May 20, 2020.

  1. Fabrice

    Fabrice New Member
    Divi Block Pro Divi Ultimate Header Plugin

    Hi,

    my header create with Divi Ultimate Header Plugin jump. I tried to add css code for page-container, main-header, etc but don't work. Can you tell me what is the problem please ?

    Thank you for your help.

    Best regards
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo
  2. Fabrice

    Fabrice New Member
    Divi Block Pro Divi Ultimate Header Plugin

  3. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Any screenshot on what you meant by jumping?
     
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Beautify your Divi archive / category page with 15 different premade blog designs:Learn More
  4. Fabrice

    Fabrice New Member
    Divi Block Pro Divi Ultimate Header Plugin

    When you go from one page to another, the header is lower before going back up. You must navigate on site to see the problem.
     

    Attached Files:

  5. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    This is how Divi works for injected elements. It will first load the content, then only the CSS to style it.

    There are 2 workarounds:

    1. Use a preloader plugin to hide the page until it's fully loaded. There are plenty free preloader plugin out there. For example: https://wordpress.org/plugins/the-preloader/

    2. 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'.

    upload_2020-5-20_23-32-54.png

    But from what I see, you already enabled the Static CSS File Generation. One of the issues with Static CSS File Generation is that it doesn't work with the archive / category page, but it should work on the rest of the pages. You just need to visit all your pages once & it will generate the CSS file to avoid seeing the 'flashing'.
     
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Tons of elegant premade sidebar styles to choose from for your Divi site:Learn More
  6. Fabrice

    Fabrice New Member
    Divi Block Pro Divi Ultimate Header Plugin

    Hi,
    if i understand i must all pages everyday ? it's silly and not practical as a system.
    Is there another solution please?
     
  7. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Not everyday. Once any visitor view that particular page, Divi will generate a CSS File, so that for subsequent visit to that page will be served the CSS File to avoid seeing the flashing. The CSS File will be kept on your server until you made some changes to your site / page.

    So far, I'm aware of these 2 solutions only: Static CSS File & preloader.
     
    1. PRO MEMBER PERKS Divi.Help Layout AI Generator - Try the power of AI to generate a custom Divi layout for you:Try Now