Stuck Header and top notification bar – jquery offset?

[Solace]

Solace

June 20, 2022 at 10:43 pm

Hey team

I have a stuck header with a separate Top Bar (notification bar plugin) that is fixed.

They both look good when loading – and when scrolling down, Kadence header shrinks and stays in the right place and the Top Bar remains fixed as it is supposed to (screenshot 1 & 2). But upon scrolling back up the page, the stuck header does not quite fully expand back into the original size again as it did on the page load (screenshot 3).

In DevTools, here is the html for:

Screenshot 1) the site header sticky on page load:

<div class="site-header-inner-wrap kadence-sticky-header item-is-fixed item-at-start" data-reveal-scroll-up="false" data-shrink="true" data-shrink-height="60" data-start-height="114">
<div class="site-main-header-inner-wrap site-header-row site-header-row-has-sides site-header-row-no-center" data-start-height="114" style="height: 114px; min-height: 114px; max-height: 114px;">

Screenshot 2) when scrolling down:
<div class="site-header-inner-wrap kadence-sticky-header item-is-fixed item-is-stuck" data-reveal-scroll-up="false" data-shrink="true" data-shrink-height="60" data-start-height="114">
<div class="site-main-header-inner-wrap site-header-row site-header-row-has-sides site-header-row-no-center" data-start-height="114" style="height: 60px; min-height: 60px; max-height: 60px;">

Screenshot 3) when scrolling back up to the top
<div class="site-header-inner-wrap kadence-sticky-header item-is-fixed item-is-stuck" data-reveal-scroll-up="false" data-shrink="true" data-shrink-height="60" data-start-height="114">
<div class="site-main-header-inner-wrap site-header-row site-header-row-has-sides site-header-row-no-center" data-start-height="114" style="height: 73px; min-height: 73px; max-height: 73px;">

It looks to me like the sticky-header jquery needs a tweak to offset the Top Bar.

Can you advise how to do that?

Thanks