Fixed Top with Breadcrumbs Bug (in Safari Only)

[kirk74]

Hello, With Integrity Stack, I am using Fixed Top Header as well as breadcrumbs. Pages always load fine, but there is a bug when you use mouse to swipe scroll on the header section again it adds an extra gap at the very top which causes the breadcrumb bar to disappear completely or partially. Only happens with MAC Safari not Mac Chrome or MAC Firefox.

I can see this is similar issue to the one raised here: … can you comfirm that this is the same bug, therefore we are waiting on a theme update for this: Sticky Header in Safari on MacOS Bug

Meanwhile to make it look correct while waiting for the bug fix:

I notice this bug is connected to the feature where as you swipe scroll the topbar disappears (because when I enable the topbar this Safari bug doesn’t happen) … but this is not a complete solution as when I do enable topbar then when use mouse to swipe scroll breadcrumbs are no longer aligned correctly to the fixed top, there is a gap between breadcrumb bar and fixed top header… once this gap is fixed then enabling the topbar will be a good fix for this issue that I can see others are also having.

Details and site link in the secure note … thanks.

[christian]

Hey @kirk74,

This is not a bug but rather a problem with your customization. The Breadcrumbs of X or the Original Header is not fixed. There’s just custom code in your site that made it fixed and that custom code is the problem.

The solution to this is to upgrade to Pro as you can make multiple bars fixed.

If you continue with your current setup, you need to consult with a developer to find the exact custom code and fix it. Please note that we only support official theme functions or features.

Thank you for understanding.

[kirk74]

why does it only happen in Safari though … and this seems to be the exact same theme Safari issue that others are reporting that theme.co have acknowledged they need to fix, like in this thread: Sticky Header in Safari on MacOS Bug

thx.

[kirk74]

I have the fix to this bug, sharing it here for others:

FYI: In my experience, the Safari scrolling bug only happened when I used Integrity Stack and Fixed Header… I have other sites with different stacks and fixed top that didn’t have this issue.

The Fix:

1. With Integrity. Stack, Fixed Top Header , if you also enable the Topbar then the Safari scrolling bug described above goes away.

2. In my case because I also had breadcrumbs enabled, having the Topbar caused the breadcrumbs bar to be in the wrong position when the topbar disappears, because the breadcrumb’s position is fixed, and it needs to be to get it to stay fixed below the header.

3. To fix it needs this JS to be added to the x-child folder, in a file named breadcrumb-fix.js

jQuery(window).scroll(function() {
var $height = jQuery(window).scrollTop();
if($height > 1) {
jQuery( “.x-breadcrumb-wrap” ).css( “top”, “100px” );
} else {
jQuery( “.x-breadcrumb-wrap” ).css( “top”, “147px” );
}
});

and the functions.php file in x-child folder needs this added to the bottom:

// Fix breadcrumbs to stay fixed with header when topbar is active
// =============================================================================

add_action( ‘wp_enqueue_scripts’, ‘add_my_script’ );
function add_my_script() {
wp_enqueue_script(
‘breadcrumb-fix’, // name your script so that you can attach other scripts and de-register, etc.
get_stylesheet_directory_uri() . ‘/breadcrumb-fix.js’, // this is the location of your script file
array(‘jquery’) // this array lists the scripts upon which your script depends
);
}

[ruenel]

Hello @kirk74,

It is good to know that you have figure out a solution to resolved the issue. Thank you for sharing.

Cheers.

[mgalindo]

This happens in the renew stack as well. As far as I am aware this bug has still not been resolved nearly 5 months after being first reported.

[marc_a]

Hi @mgalindo,

Just follow the recommendation given by @kirk74 and thank you for bringing our attention on this issue.

[kirk74]

@mgalindo That is interesting what you say about Renew stack, as I have made several sites with Renew and Fixed Top Header, some have the topbar and some don’t, but in either case I haven’t got the Safari scrolling bug… do try that hack and see if that works for you.

[ruenel]

Kindly let us know if it works for you @mgalindo. Thanks.