Sticky Menu Awkward Spacing Jump


Before removing my default header image from the front page, my fixed menu scrolled up and down the page perfectly.

I did some changing and removed the default header image from the front page. After this, the menu was no longer fixed when scrolling down the page.

I added this Custom CCS

.site-header.fixed {
position: fixed !important;

The menu then became fixed again; however, now it performs this awkward jump the second I slightly scroll down.

This disrupts some of my content and is rather annoying.

Check out what I mean here.

Hope you can help! Thank you.


Please also try to add this CSS code to fix the issue:

body {
    padding-top: 100px;


I was able to fix my initial issue with the following code:

Now my only issue is when I go to a mobile platform my menu gains height and continues to cut off some content on select pages. How can I target this code to mobile form of my website.