[Naomi CParticipant]

Hi! I’ve got the correct anchors named and linked, but they don’t show up in the right place from within the page. Example:

-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!

[AlexanderKeymaster]

Hi Naomi,

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');
  });
});

[Jeremy TParticipant]

I used the above solution for my site — http://69.195.124.150/~fineeyec/content-band-test/ but I am also getting the header or top of the content band cut off.
I am assuming this makes an adjustment to compensate for various header heights. Is there a way to adjust this to make it work for my setup?

Thanks,
Jeremy

[RadModerator]

Hi 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.

[Jeremy TParticipant]

I removed the javascript code I previously had in customizer so there is no custom code in customizer currently. I then added the CSS you suggested. Unfortunately, the custom headlines continue to be cutoff in the #x-content-band.

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

[ChristianModerator]

Hey Jeremy,

Can you give us login details to your WordPress admin?

Thanks.

[Jeremy TParticipant]

This reply has been marked as private.

[ChristianModerator]

Hey Jeremy,

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. 🙂

[Jeremy TParticipant]

Thanks for the updated code. Unfortunately it is still cutting off the header in my simple example page. Were you able to test this? Can you confirm and offer any suggestions? There are many pages in the site that use this type of navigation Alternatively, if there is a better way to implement it let me know.

Thanks again — Jeremy

[ChristianModerator]

Hey 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.

[Jeremy TParticipant]

This reply has been marked as private.

[RadModerator]

Hi Jeremy,

As of now, not a best idea to apply this feature on all button. This lead to more issues. What you could do is use a unique button css selector where click event will be attached(scroll effect).

I added this code at your child theme’s functions.php

function x_add_button_scroll() { 
?>
		<script type="text/javascript" charset="utf-8">
          jQuery(function($){
			  $('.x-scroll-to-content-band-title').click(function(e){
			    e.preventDefault();
			    
			    var hash = $(this).attr('href').split("#").slice(-1)[0];

			    $('html,body').animate({
			      scrollTop: $('#' + hash +' .h-custom-headline' ).offset().top - ( $('.x-navbar').height() + $('#' + hash +' .h-custom-headline' ).height() )
			    },700 ,'swing');
			  });
			});
        </script>
<?php 
}

add_action('wp_footer', 'x_add_button_scroll');

Now, everytime you add a button, or any link which you want to scroll on content band’s title. Then all you have to do is add x-scroll-to-content-band-title at Class field of your button. We don’t want to link all your buttons on content band forever, so this will give you another option.

Check this out! http://69.195.124.150/~fineeyec/support/downloads/icc-media-profiles/efi-icc-profiles/

Cheers!

[Jeremy TParticipant]

This works great! Thanks for the excellent support and getting me something that works better than expected.

/Jeremy

[RadModerator]

You’re so welcome Jeremy!

[Jeremy TParticipant]

Is there anyway to add this class to a menu item?

Thanks,
Jeremy

[Author]

Posts