• Home
  • About Us
  • Digital Marketing Terms
  • Free Tech Support
  • Contact Us
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Code Snippets

Real Answers From Real Developers

  • WordPress General
  • Divi Builder Tutorials
  • WordPress Plugins
  • Local SEO
  • Show Search
Hide Search

How to Fix The Jumping Header Issue Divi Builder

code-admin · March 19, 2021 · 1 Comment

This has been an issue with Divi Builder ever since I can remember. On page-load, you may notice the jumping header issue caused by a few code inconsistencies. For the record, I use the Divi Builder for just about every website I build. The jumping header issue is only a small snafu that can be easily corrected.

The real issue is caused by the style sheet loading first, and then the inline CSS is applied shortly after. The delay in the loading time creates the jump illusion.

Here is a quick tutorial on how to fix the jumping header issue in the Divi Builder:

1. Use an inspector software or the Firebox Developer tools inspector to locate the following items within the Divi page elements. See image below.

Divi Builder Jumping Header Issue

2. Add the following CSS code under Customize >> CSS to match the #page-container: style=”padding-top:152px;” and #main-header: style=”top:50px;”.


#main-header {
top: 50px !important;
}
#page-container {
padding-top: 152px !important;
}

It is important to note that the values will be different for your website, and you need to change them to match. If the issue persists with the Divi header jumping, try adding a fade animation to the entire header. You may have another type of loading issue that can be eliminated by adding an animation.

Filed Under: Divi Builder Tutorials

You May Also Like

The Site is Experiencing Technical Difficulties WordPress
Divi Header Transparent Menu
Divi Builder Not Working With Cloudflare
Divi Builder Not Working With Cloudflare CDN

Reader Interactions

Comments

  1. Jackie says

    April 21, 2021 at 7:38 am

    Hi I am new to using wordpress and I would be very grateful for any help please. I have a jumping header and I understand the explanation on how to resolve it but I cannot find the page container and header top values when I inspect the home page any help would be very welcome. Thanks so much
    The website is restricted access until it launches.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Recent Posts

  • The Site is Experiencing Technical Difficulties WordPress
  • Using Flexbox CSS To Center Elements
  • Divi Header Transparent Menu
  • Divi Builder Not Working With Cloudflare CDN
  • Divi Visual Builder Not Saving Changes

Recent Comments

  • Jackie on How to Fix The Jumping Header Issue Divi Builder
  • Kate on Divi Builder Not Working With Cloudflare CDN
  • Mimi Cartee on Can’t Change The WordPress Admin Email Address

Archives

  • November 2021
  • June 2021
  • May 2021
  • March 2021
  • January 2021
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • March 2020
  • October 2019
  • September 2019
  • May 2019

Categories

  • Digital Marketing
  • Digital Marketing During Covid-19
  • Digital Technology
  • Divi Builder Resources
  • Divi Builder Tutorials
  • Gravity Forms
  • Gravity Forms Snippets
  • Local SEO
  • Social Media Marketing
  • Social Media Trends 2021
  • Uncategorized
  • WooCommerce Snippets
  • WordPress Code
  • WordPress Experts
  • WordPress Plugins
  • WordPress Technology
  • WordPress Themes
  • WordPress Troubleshooting

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Copyright © 2023 · Daily Dish Pro on Genesis Framework · WordPress · Log in

Manage Cookie Consent
We use cookies to optimize our website and our service.
Functional Always active
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
The technical storage or access that is used exclusively for statistical purposes. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
Manage options Manage services Manage vendors Read more about these purposes
Preferences
{title} {title} {title}