how to make top bar block hook sticky

Hi, im trying to make my top bar block hook (before header) and Header sticky.
with header i have set in apearance->customize->layout->sticky navigation , and i have no problem there

but for the top bar, i try to copy the aditional css from other suport post here,
but when i scroll down the live website, there is gap between top bar and header.

this is the script i copied:
#sticky-navigation,
#mobile-header.is_stuck {
top: 50px !important;
}
/* adjust position when admin bar is shown */
.admin-bar #sticky-navigation,
.admin-bar #mobile-header.is_stuck {
top: 50px !important;
}
.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
z-index: 100;
}

GeneratePress Version: 3.1.3
GP Premium version: 2.1.2