How to offset a header line and menu?

Hello,

I checked the theme link to see how the sticky/fixed header works and did some tests. The only solution for the issues you’re having is via javascript.
I’m not sure if the theme provides a way to insert custom js code but there’s no other way to fix this.

I’ll try to explain what exactly happens, although the issue is a bit technical.

The problem

The overall height of the theme’s layout changes depending on header’s position. When the header is fixed/sticky, document height is decreased. When the header is not fixed (e.g. when page has not scrolled past the header line) document height is increased.
All this happens on-the-fly because header’s position is changed while the page is scrolling.

The above means that all elements following the header change their top position while the page is scrolling. This of course results in the “wrong” scrolling position when the links are clicked before the header becomes sticky (e.g. when page is not scrolled at all).

In addition to the problem above, the theme does not switch header’s position by some class or some other identifiable way. It simply switches its CSS position (between relative and fixed) via javascript on-the-fly without compensating for the space the header was occupying while it was not fixed (thus document’s height change).

I really hope all these make sense 🙂

The solution

You need to add the following CSS and javascript in your theme.

CSS:

#sticky_header{ margin-bottom: 0; }
.header-line{ margin-top:0; }

Javascript:

var ticking;
window.addEventListener("scroll",function(e){
  if(!ticking){
    window.requestAnimationFrame(function(){
      var header=jQuery("#sticky_header");
      jQuery(".header-line").css("margin-top",(header.css("position")==="fixed" ? header.height() : 0));
      ticking=0;
    });
  }
  ticking=1;
});

Keep the #sticky_header as the ‘Offset’ option value in plugin’s settings.

Hope this helps