Header woes—trying to overlap something

[ankit_ojha]

Hi guys,

So I have a homepage that I’m looking to do page jumps with, and my header is basically duplicated by triggering the ID I’ve set for the page jump. Essentially I’d love for my page jump to have the header overlap the section, like so:

But whenever I try jumping from the first section to the next, this happens:

I’ve tried everything, and I’m probably only just missing a step here, but it’s been frustrating me to no end, and I really need help!

Thanks,
Ankit

PS: This could legitimately solve a lot of problems with my headers set for other posts and the likes, and I’m really hoping this doesn’t involve a major developer to come in, because my broke rear end probably will have to continue doing trial-and-error for the rest of my life lol.

[rad]

Hi @ankit_ojha,

Thanks for reaching out.

When it scrolls, the header bars are calculated as well. I recommend setting your header to sticky (especially the default one). And please provide your login credentials in a secure note, I like to test it as well.

Thanks!

[ankit_ojha]

Hi Rad, they’re in the secure note in the post I used to open the thread

[ruenel]

Hello There,

You will need to edit your header and change the initial position to relative instead of absolute.

Screenshot

Please let us know if this works out for you.

[ankit_ojha]

Hi @RueNel.

No, it hasn’t unfortunately. I’ve tried this before changing to absolute. I’ve changed that back to relative only a few minutes ago and it’s still the same.

[christian]

Hey @ankit_ojha,

The new version includes an header offset for jump links and there’s no option to disable it. I’ve added this code in your page’s Content JS to do it. Please see the screencast link in the secure note to see that it works.

jQuery(function($){
  window.csGlobal.csHooks.filter('ready', function() {
    window.csGlobal.csHooks.filter('hash_scrolling_offset', function(offset) {
      return offset + $('header .hrev').height();
    });
  });
});

The code above ($('header .hrev')) targets your specific bar. I’ve added a class to your bar by the way.

I’ll post this in our issue tracker so this use case might be considered in a future release.

Thanks.

[ankit_ojha]

Hi @christian_y!

Thanks a lot for this. Could you explain this to me a bit so I can maybe use this workaround in other pages without confusing myself?

Thanks

[christian]

For other pages, you can create a new Header and just assign a class to your bar like this:

Then you can copy the code from your home page’s Content CSS and replace header .hrev with header .my-class in your new page.

Hope that is clear now.

[ankit_ojha]

@christian_y, you are a lifesaver. Thank you, thank you all so much @Rad, @RueNel, everyone

[christian]

You’re welcome, @ankit_ojha.