It’s an annoying thing but it does happen to most of us and the sad part is that when you encounter it again you have forgotten what causes it and what you did to fix it the last time.

So you can see from the featured image above the gap we are talking about. It happens when you are specifying settings in customiser to do with the primary and fixed menus. The default setting exists with the theme so any adjustments that you make here will be passed to the theme handler as direct CSS.

Let’s say the theme specifies 100px for the header navbar and you come along and decide to change it to just 50px. On page load the navbar will be drawn from the top down by 100px and then the front page will load and then the stylesheet and then any direct CSS is passed which means at this point 50px are subtracted from the navbar value and the whole page from that point is redrawn.

This causes an effect off seeing the page with a white space between header and page and then a second later it snaps back into place. The simple fix is to place the desired values in the stylesheet so that the value is executed before the direct CSS values are passed and therefore by-pass the problem as there will be no need to adjust and re-draw.

You can see what’s going on using the browser’s inspection tool. It will show two IDs for the page and the header, and if you have a jumping header they will of course have different values.

#page-container {padding-top: 100px;}

#main-header {top: 0px;}

Go into your theme customiser and look at Header & Navigation > Primary Menu Bar > menu height here you will see the value. Place this value in #page-container and put the code at the start of your stylesheet.

#page-container {padding-top: 50px;}

Save the stylesheet and refresh the webpage (Ctrl + F5). If it did not work, place !important in there, although this step should not be technically necessary.

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