1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
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 Beautifully crafted custom colored 'Industrial' Divi layout for all Pro members: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 Login Customizer Plugin - Instantly beautify your Wordpress login page with 6 premade 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 Blog Plugin - Easily set awesome default design for your Divi single blog page: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 Ultimate Header Plugin - Add custom vertical navigation for your Divi site. Turns into slide in menu on mobile:Learn More