Section ID - scroll to ID - offset

[allankayak]

I use some common section IDs and other anchor links in my menu. These work great, but they slide the page to the very top of the browser page which hides the top behind my menu.

Is it possible to align the point to the the bottom of the visible menu, rather than top of browser?

You see what I mean if you try the booking or Finn oss links - these pull up the bottom two sections on the page.

Aktive opplevingar for alle - Voss Active

[basanta]

Hi There,

Thanks for writing in!

This is the usual behavior of the anchor link that it would scroll the section to the top of the browser.
To avoid hiding the content you can add little more padding (add the height of the menu bar to the section top padding) so that the content would visible.

Another solution can be done via custom JS which we don’t support as this is something out of our theme support scope.

Thanks

[allankayak]

Humm. I’m pretty sure this used to be how it worked. we have always used anchors and links to move around a page with one-page navigation style and the top of screen has been visible, its only recently ive noticed it being hidden.

[rad]

Hi Allan,

One page navigation will only work on the same page, it’s not applicable for linking from or into another page and that’s what I’m seeing in your setup.

It could be working due to custom code that was added, and I’m seeing the custom javascript in your site related to this. And the reason it’s not working anymore is because you’re now using a custom header made through Pro and your custom code is only applicable to standard header. And that code is seems to be too old.

The one page navigation should work for the purpose of in page navigation, so please change your menu link URL to something like #klatrepark instead of /klatre-og-ziplinepark/#klatrepark. Then remove your custom code as it may hinder the default functionality and test it again. But make sure to back up all your codes.

Thanks!

[allankayak]

This wont work, as this is not a one-page site. The links need the additional url address to locate the correct page and anchor from a different page. If I just add #theSectionID to the link, if that ID is not on the page it will not find it, and will just jump to the top of teh current page.

[allankayak]

To add, so you understand, the linking to Section ids fro other pages works exactly as it should. its just that it is aligned to the top of the browser, not the bottom of the menu, which obviously means the title or maybe something important is hidden behind the menu.

I cant add a margin or pad to top of the section, as that would mess us the page design giving padding in an otherwise border less design

[christian]

Hey @allankayak,

Pro will offset the sticky bar out of the box provided that a fixed height is provided and the Shrink Amount is not set to 0. I’ve replicated your setup in my test site and the problem is you’ve set the Bar’s Shrink Amount to 0. You should set it to 1 especially if your do not need the bar to shrink when it gets sticky.

Please check your setup. If that does not help, please give us WordPress Admin access in a Secure Note so we could check your setup.

@Themeco1

###Secure Notes

It is very common to need to share sensitive information with our staff such as login or FTP information. In order to keep this private, be sure to use the Secure Note button that you will find at the bottom of each reply.

Thanks.

[rad]

Hi @allankayak,

Yes, I see that your set up is not one-page navigation, but I only suggested since what you’re trying to set up is similar to one-page navigation (navigating to sections of the page), and one-page navigation is not applicable for linking from or into another page which is your current setup.

I just thought you’re trying to set up a one-page navigation since you’re linking within the page with scrolling effect. With that, you’ll really need a custom code to make it work since your existing custom codes are really old.

Please replace this existing custom code

// Correct Positioning
jQuery(document).ready(function($) {

  var screenWidth     = $( window ).width();
  if( screenWidth < 980 ) {
  var $body           = $('body');
  var $adminbarHeight = $('#wpadminbar').outerHeight();
  var $navbarHeight   = $('.x-navbar').outerHeight();
  var $topbarHeight   = $('.x-topbar').outerHeight();
  var $logobarHeight   = $('.x-logobar').outerHeight();

  $('.x-nav-scrollspy li a[href^="#"]').off('click');
  $('.x-nav-scrollspy li a[href^="#"]').click(function(e) {
    e.preventDefault();
    var $contentBand = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $($contentBand).offset().top - $adminbarHeight - $navbarHeight - $topbarHeight - $logobarHeight + 1
    }, 850, 'easeInOutExpo');
  });

  $body.scrollspy({
    target : '.x-nav-collapse',
    offset : $adminbarHeight + $navbarHeight + $topbarHeight + $logobarHeight
  });

// Fixing the custom JS code for inner pages
  var $navbarHeight   = $('.x-navbar').outerHeight();
  var $topbarHeight   = $('.x-topbar').outerHeight();
  var $logobarHeight  = $('.x-logobar').outerHeight();
  var $combineHeight  = $navbarHeight + $topbarHeight + $logobarHeight;

  $('.masthead.masthead-stacked').css( 'height', $combineHeight );
  }
});

with this

jQuery ( function($) {

var current_offset = $('#wpadminbar').outerHeight() + $('.e11409-1.x-bar').outerHeight();

$(document).ready( function() {

scroll_animate ( $(window.location.hash).offset().top - current_offset );

} );

$(document).on('click', '.e11409-5.x-menu a[href*="#"]:not([href="#"])', function(e) {

e.stopPropagation();

scroll_animate ( $( '#' + $(this).attr('href').split("#").slice(-1)[0] ).offset().top - current_offset );

} );

function scroll_animate ( offset ) {
  $('html, body').stop().animate({ scrollTop: offset }, 850 );
}



} );

Please note that this code is only applicable for your current setup, we don’t do maintenance and customization of old codes and we can’t provide further support on this snippet. But you’re free to change and enhance it according to your preference. And it should be the user’s responsibility to maintain, enhance, and fix their custom added codes

Thanks!

[allankayak]

Thanks guys!!! I will check it out and let you know the outcome or if I need more help I’m not that nerdy, but should be able to find what you’re talking about

Thanks and god jol!

[allankayak]

Hei. a Christian said, I set the skrink to 1 and it seems to work as required. I have just also deleted the whole custom code and all seems to work, so wonder if I even need and code. I’d rather have a minimal custom code as possible to avoid future update issues.

[rad]

Hi @allankayak,

Sure, please do that but should only be applicable for certain conditions as @christian_y mentioned.

The custom code was just also based on your existing code since with intention of maintaining masthead height as the fixed header changes its dimension. So you may also save a back-up of the code in case you’ll need it in the future.

Thanks!