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

Thanks so much for the detailed response. I have been testing this solution and it works for the desktop, but what about the mobile menu? It doesn’t seem to hold for it.

It can be tested using the following URL: https://www.dataflytt.com

If I add :fixed then it fixes the mobile scroll, but then the desktop scroll breaks.

Hi there. Can you please have a look at the issue above? Thanks!

Hello,

I’m out of my working place but if you can disable the maintenance mode I could have a look.

Hi,

I have the same problem on my website.

On my home page i have 3 blurbs that redirect to another page section.
https://devcgdm.skyhostmedia.com/

When it lands it won’t consider the top menu so the title is hidden by the menu.
It doesn’t happen when i redirect directly on page using the nav menu.

What should i do?

Thank you

@gcomtois Hi, I just checked your site and plugin is not activated(?)

@malihu

I didn’t see it was a post for a plugin issue but i have the same issue. Sorry about that.

• This reply was modified 7 years, 9 months ago by gcomtois.

@gcomtois I still don’t see the plugin being activated in your site.