One page Nav - Gap at the top when scrolling to section (header height)

[archerthefox]

I’ve got a one-page nav set up which is working perfectly.

The issue I’m having is that the scroll is stopping before the section leaving the exact header width as a gap.

I’ve got a transparent header so I don’t want to have the gap. I want it to scroll all the way so the section fills the screen.

I’ve tried this JS code from another post I saw but it’s not working:

jQuery(function($){
$('a[href*="#"]').off('touchend click');
$('a[href*="#"]').on('touchend click', function(e) { 
e.preventDefault();
var id = $(this).attr('href');   
var $id = $(id);
if ($id.length === 0) {
    return;
}

var pos = $id.offset().top - 70;
$('body, html').animate({scrollTop: pos}, 1000, 'easeInOutQuart');
return false;
});
});

Here is a link to the website: gg.archerthefox.com/splash

[ruenel]

Hello @archerthefox,

Thanks for writing in! Be advised that the gap that you are referring to is the actual height of your header. This were made possible so that the section will not displayed behind the header especially if your header has a background color. You may see it as gap in your design. As soon as you add a background color to your header, you will find the gap useful not covering the section as you click on the anchor links to the respective sections.

Hope this helps.

[archerthefox]

Thanks for this. I understand that but I don’t want a colour… I want a transparent header with sections that are full page.

So is there a way to scroll to the top of the section behind the header?

Some js for example like the above that says scroll to section +height of header?

[christian]

Hey @archerthefox,

Our core developer has given us a JS hook for this case. Below is the JS code.

jQuery(function($){
  window.csGlobal.csHooks.filter('ready', function() {
    window.csGlobal.csHooks.filter('hash_scrolling_offset', function(offset) {
      return offset + $('.e52-1.x-bar').height();
    });
  });
});

Check this part of the code $('.e52-1.x-bar'). Assign a class to the bar you wish to offset and change e52-1 to the class you just assigned to your bar.

Provided you’ve copied the code completely and selector I’ve mentioned above is correct, that should work. See the screencast in the secure note.

Hope that helps.

[archerthefox]

That worked perfectly!!

Thank you!

[nabeel]

We’re glad it worked.

Cheers!