Anchor alignment issue

[Taffy]

The anchors do not align properly.

We have placed a blank spacer (0 height) above each section’s parallax heading, yet when you navigate via the mani menu the heading is cut off, i.e. the anchor is too high.

Please review here: http://taffydev.com.au/clients/oamm/sport/

[Mohammad – SUPPORT]

Hi,
Please go to Admin -> Theme Options -> Custom JS => Here put given below code and update options.

<script>
jQuery( document ).ready(function() {
jQuery('ul#menu-main-menu-1 li.menu-item-1389  ul.sub-menu li a').bind('click', function(e) {
var anchor = jQuery(this),
url = anchor.attr('href');
 scrollid =    url.substring(url.indexOf('#'));
spacerHeight = jQuery(scrollid).height(),
headerHeight = 0;
if (jQuery('.sticky-header').length > 0) {
headerHeight = jQuery('.sticky-header').height();
}
if (jQuery('#wpadminbar').length > 0) {headerHeight = headerHeight + 28;
}
						
jQuery('html, body').stop().animate({
scrollTop: jQuery(scrollid).offset().top + spacerHeight - headerHeight - 30
						}, 1000, 'easeInOutExpo');
						
	e.preventDefault();
});
});
</script>

Hope that should work and let me know your feedback.
Thanks 🙂
With Best Regards
Swift Ideas

[Taffy]

Thank Mo, but it didn’t work.

I added the JS as suggest and nothing seems to have changed.

try selecting a Sport submenu from the main nav and you’ll see that the fancy header is still cut off.

http://taffydev.com.au/clients/oamm/

[Mohammad – SUPPORT]

Hi,
Please remove that one code and use this one new code:

<script>
jQuery( document ).ready(function() {
scrollid = window.location.hash;
spacerHeight = jQuery(scrollid).height(),
headerHeight = 0;
if (jQuery('.sticky-header').length > 0) {
headerHeight = jQuery('.sticky-header').height();
}
if (jQuery('#wpadminbar').length > 0) {headerHeight = headerHeight + 28;
}
                        
jQuery('html, body').stop().animate({
scrollTop: jQuery(scrollid).offset().top + spacerHeight - headerHeight - 30
                        }, 1000, 'easeInOutExpo');
 
jQuery('ul#menu-main-menu-1 li.menu-item-1389  ul.sub-menu li a').bind('click', function(e) {
var anchor = jQuery(this),
url = anchor.attr('href');
 scrollid =    url.substring(url.indexOf('#'));
spacerHeight = jQuery(scrollid).height(),
headerHeight = 0;
if (jQuery('.sticky-header').length > 0) {
headerHeight = jQuery('.sticky-header').height();
}
if (jQuery('#wpadminbar').length > 0) {headerHeight = headerHeight + 28;
}
                        
jQuery('html, body').stop().animate({
scrollTop: jQuery(scrollid).offset().top + spacerHeight - headerHeight - 30
                        }, 1000, 'easeInOutExpo');
                        
    e.preventDefault();
});
});
</script>

Thanks 🙂
With Best Regards
Swift Ideas

[Taffy]

This code causes many issues:

Drop-down submenus downy appear
Counters stop working

[Mohammad – SUPPORT]

Hi,
I see that you have removed the code so how can i check these issues.
Thanks

[Taffy]

Hi Mo,

I have re-entered the JS for you to look at.

Problems

1) One page navigation doesn’t work
2) Sub-menus in main nav don’t work
3) Counters (Sport page) don’t work

Not sure what else is wrong.

[Mohammad – SUPPORT]

Hi,
Please remove that one code and use this one new code:

<script>
jQuery( document ).ready(function() {
scrollid = window.location.hash;
if(scrollid){
spacerHeight = jQuery(scrollid).height(),
headerHeight = 0;
if (jQuery('.sticky-header').length > 0) {
headerHeight = jQuery('.sticky-header').height();
}
if (jQuery('#wpadminbar').length > 0) {headerHeight = headerHeight + 28;
}
                        
jQuery('html, body').stop().animate({
scrollTop: jQuery(scrollid).offset().top + spacerHeight - headerHeight - 30
                        }, 1000, 'easeInOutExpo');
 }
jQuery('ul#menu-main-menu-1 li.menu-item-1387 ul.sub-menu li a ,li.menu-item-1388 ul.sub-menu li a ,li.menu-item-1389  ul.sub-menu li a').bind('click', function(e) {
var anchor = jQuery(this),
url = anchor.attr('href');
 scrollid =    url.substring(url.indexOf('#'));
spacerHeight = jQuery(scrollid).height(),
headerHeight = 0;
if (jQuery('.sticky-header').length > 0) {
headerHeight = jQuery('.sticky-header').height();
}
if (jQuery('#wpadminbar').length > 0) {headerHeight = headerHeight + 28;
}
                        
jQuery('html, body').stop().animate({
scrollTop: jQuery(scrollid).offset().top + spacerHeight - headerHeight - 30
                        }, 1000, 'easeInOutExpo');
                        
    e.preventDefault();
});
});
</script>

Thanks 🙂
With Best Regards
Swift Ideas

[Taffy]

The alignment issue remains.

Click on a sub-menu in the main nag and you’ll see that it takes you to the anchor, but the parralax heading is cut off.

The blank space anchor IS above the heading.

Thanks.

[Mohammad – SUPPORT]

Hi,
There is some wrong illegal character in code. Please remove that code and try again because i corrected code above.

Thanks 🙂
With Best Regards
Swift Ideas

[Taffy]

Getting there.

This fix works on properly the Sport page, but not Retail or Digital.

Same issue.

[Mohammad – SUPPORT]

Hi,
Please remove that code and try again because i corrected code above.

Thanks 🙂
With Best Regards
Swift Ideas

[Taffy]

Perseverance has paid off – work perfectly!

Thanks again.

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m very glad that issue resolved.
Thanks 🙂
With Best Regards
Swift Ideas