Sticky header overlaps 1 page content using section ID for nav

[armillaria]

Seems to be a known issue, but I can’t find a resolution.

Site is https://sphaera.wpengine.com

We are using the IDs as required as page anchors in the navigation, but in linking to them, it’s rolling that anchor up behind the nav.

I believe there is a coherent way to handle this in the pro header settings (that doesn’t require either a JS or CSS hack), but I can’t figure it out.

Frankly, I’m frustrated. This works out of the box with the basic menu (not pro), but the pro menu simply doesn’t work as anticipated. I have applied several different JS & CSS fixes as recommended elsewhere and none of theme work. I am preparing to tear down the pro header and go back to basics, but imagine that somebody out there knows how to fix this.

Support appreciated.

note; I posted a similar request in the peer-to-peer forum but the resulting CSS recommendation failed.

[ruenel]

Hello There,

Thanks for writing in! Please be advice that one page navigation is not fully supported yet with the custom header. To resolve your issue, you will need a custom JS code. Please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)

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

setTimeout ( function() {

$('.x-anchor.x-anchor-button[href*="#"]').off();

$(document).on('click', '.x-anchor.x-anchor-button[href*="#"]', function(e) {

e.preventDefault();

console.log( $(this).attr('href') );

var hash = '#' + $(this).attr('href').split('#')[1];

if ( hash == '#' ) return false;

$('html, body').stop().animate({ scrollTop : $(hash).offset().top - $('.x-bar-fixed').height() });

} );

}, 500 );

} );

Please let us know if this works out for you.

[armillaria]

Thanks for this. I have applied and run the JS supplied, but it is still performing as previously.
Please advise.

[ruenel]

Hello There,

Sorry if the code did not worked out for you. Please have it updated and use this instead:

(function($){
	$( document ).ready( function() {
		$('.x-anchor.x-anchor-menu-item[href*="#"]').off();
		$(document).on('click', '.x-anchor.x-anchor-menu-item[href*="#"]', function(e) {
		e.preventDefault();
		console.log( $(this).attr('href') );
		var hash = '#' + $(this).attr('href').split('#')[1];
		if ( hash == '#' ) return false;
		$('html, body').stop().animate({ scrollTop : $(hash).offset().top - $('.x-bar-fixed').height() });
		} );
	});
})(jQuery);

We would loved to know if this has work for you. Thank you.

[armillaria]

Worked perfectly. Thank you!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.

[armillaria]

Hi again
The JS appears to have broken the ability to link to the page anchors from another page.
All sub pages and posts have a separate menu (not 1 page), and this menu contains links in the format /home/#x-content-band-1 etc
I have also tested the format /home#x-content-band-1, as well as the full URL and none of these work
It was working before we implemented this latest (and now working) JS

Additionally the JS doesn’t work on the first use, but on every subsequent use.

eg. if I click on any of the menu items, it will scroll to the incorrect position on the page (as before) but each additional time I click on a menu item, it will take me to the correct location

I have cleared the server cache and the browser cache to test this, and can’t figure out why

[christopher]

Hi there,

As you may already know this is yet to be implemented the feature and currently the theme has problems regarding this. Whatever we suggest might break another part of the website.

Unfortunately, we do not have more suggestion for the time being and you will need to wait for the upcoming releases to have a stable code refactored version.

Thank you for your understanding and patience.