Scroll below and anchor links not working right

[Mik3Bang3r]

So it was all good just a week ago… then idk what happened after an update and can’t find the fix.

On Mikebanger.com/about the scroll below slider button and all anchor links seem to not scroll down low enough leaving a gap. I’m pretty sure I built the header correctly and it was working fine till an update.

I can’t find the problem on the back end. Any solutions? Thanx!

[ruenel]

Hello There,

Thanks for writing in! I have inspected your page and I can see that you have implement the element ID incorrectly. Please be advised that an element ID must be unique and there will be no duplicates.
https://www.w3schools.com/html/html_id.asp

Have two sections sharing one ID creates an issue. The link will not work in smaller screens. I would suggest that you only create one section having with the only ID name. If you want to show or hide a section, add it as your row instead. The solution would be just one section with an ID and two rows inside the section. The first row could be shown for large screen and the second row could only be visible in smaller screens.

Hope this helps. Please let us know how it goes.

[Mik3Bang3r]

Hi and thanks. Yes I beleive I was aware of the issue you speak of. The reason I tried multiple sections was to reposition the background images which didn’t look great on mobile.

The issue I’m talking about though is basically the header not acting as “absolute” as it should. Without even using anchors, try the scroll below slider arrow link. It does not scroll all the way below and leaves space for something that isn’t there. It does this with every one page link.

Thanks again!

[rad]

Hi @Mik3Bang3r,

I’m able to reproduce this on my end, looks like the height of the sticky bar is included in the calculation when it scrolls. I’ll add this to our issue tracker.

The workaround is adding this code to your global custom javascript.

jQuery ( document ).ready ( function($) {

$(document).on('click', '.x-slider-scroll-bottom', function(e) {


$('html, body').stop().animate( { scrollTop: $('.x-main').offset().top } );


} );

} );

Thanks!

[Mik3Bang3r]

Hey Rad, thanks for checking it out.

The code worked but only with sliders. The issue seems to happen with every one page link where the header should fall absolute over the sections. Anything else I could try?

[christian]

Hey Mike,

This is because in the latest version, a sticky bar offset has been introduced so when you click on a jump link, there is script firing to move the content down to offset the height of your bar. This is undesired if you have a transparent bar so you need to override that offset.

The override code goes like this:

jQuery(function($){
  window.csGlobal.csHooks.filter('ready', function() {
    window.csGlobal.csHooks.filter('hash_scrolling_offset', function(offset) {
      return offset + $('header .class-of-your-bar').height();
    });
  });
});

Your situation is similar to another thread. Would you mind following the solution here.

If that doesn’t help, please provide WP admin access in a Secure Note.

Thanks.

[Mik3Bang3r]

Thanks so much Christian! I couldn’t figure it out initially because I wasn’t properly naming the bar class but I got it to work finally. Thanks!!!

Mike

[Prasant]

You are most welcome.