-From the navigation menu, when I link to #x-content-band-3, it works properly.

-When I link to the same content band via a link or button from within another content band, it goes to the correct band, but cuts off the top part of it.

My site is here: http://gojifarmusa.com. From the navigation, it’s Our Tea (working). From Our Company, there’s a Learn More About Our Tea button (not working correctly). The top of the content band is getting cut off.

Thanks!

This is because One Page navigation uses the “fixed header” and automatically compensates for the header’s height when choosing where to scroll.

This compensation isn’t added to other links, so they adjust the page to the content band is at the very top. This ends up getting covered by the navbar.

Try adding this code under Customizer > Custom > Javascript. It should supplement the One Page Navigation, and allow buttons to work too.

jQuery(function($){
  $('a.x-btn').click(function(e){
    e.preventDefault();
   
    $('html,body').animate({
      scrollTop: $('#' + $(this).attr('href').split("#").slice(-1)[0] ).offset().top - $('.x-navbar').height()
    },700 ,'swing');
  });
});

Thanks,
Jeremy

You pasted a css along with javascript which should not be.

This is what I see, please move this to css section.

  .admin-bar.x-icon .x-sidebar {
    top: 332px; } 

There is one another error, but the script is correct. It can be cause by this css misplacement, not sure yet so you may need to fix this first issue.

Thank you.

What am I missing?

http://69.195.124.150/~fineeyec/content-band-test/
WP v3.9
X 1.8.4
X Shortcodes 2.2.1

Thanks,
Jeremy

Can you give us login details to your WordPress admin?

Thanks.

The reason why it doesn’t work because Naomi’s case is slightly different than yours. I went ahead and inserted the right code in your Customizer > Custom > JS.

The code is

jQuery(function($){
  $('.x-navbar .sub-menu li > a').click(function(e){
    e.preventDefault();
   
    $('html,body').animate({
      scrollTop: $('#' + $(this).attr('href').split("#").slice(-1)[0] ).offset().top - $('.x-navbar').height()
    },700 ,'swing');
  });
});

I changed “a.x-btn” to target the sub-menu.

Hope that helps. 🙂

Thanks again — Jeremy

Please see http://screencast.com/t/L7WU807gMrn

We test our solutions first before posting as much as possible. I’ve placed that code in the Customizer’s JS box.

Thanks.