Mobile sticky header: scrolling not smooth

Hi there,

so when scrolling do you want the two buttons to stick but no the Logo and Menu toggle?

Yes, if possible. Preffered.

Or it is difficult we can remove sticking the button.

Buttons can be same behaviour as logo when scrolling (can hide)

Having it stick separately to the logo/menu toggle would require JS and that would still be jumpy. But the inside-navigation container for the mobile header also uses flex so the order property will allow you to move the CTA. So this CSS:

#mobile-header .call-to-action {
    position: fixed;
    margin-top: 3rem;
    display: flex;
    background: #fff;
    width: 100%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    justify-content: center;
    z-index: 0;
    border-bottom: 1px solid #80808040;
}

Change it to:

#mobile-header .call-to-action {
    order: 5;
    display: flex;
    background: #fff;
    width: 100%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    justify-content: center;
    z-index: 0;
    border-bottom: 1px solid #80808040;
}

Thank you. I have updated css. Now header jumb fixed.

But when scrolling, the page content now jump a little bit.

Is we need to adjust any other css?

Can you disable the autoptimize plugin so i can see whats going on

Yes.

AutoOptimize - Disabled.

Looks like that cured the problem, may have to clear your browser caches to see it.

Now try re-enabling autoptimize it may have just been some scrambled CSS in the cache.

Thank you for your response.

Tried to clear cache and re-enabled the cache plugin etc.

But still the page top is jumbing from top, on page scroll start.

While checking: this sample page don't have that issue.

http://notarydev.farahatco.net/index.php/gp-transparent-header/

Tried to update css slector from

#mobile-header .call-to-action

to

.call-to-action

Feeling now jumbing effect is less.

nav sticky-placeholder call-to-action class now gets the css effect.

Can you please have a look?

Thanks.

I think the issue is to do with the lazy loader.
Can you try disabling it.

Disabled and cache cleared.

Feeling still have small jumb.

Still a difference in height between the placeholder and the sticky nav.
Try this CSS:

#mobile-header {
    min-height: 128px;
}

May need to 'tweak' the height a little

Thanks, It fixed jumbing issue.

But when scrolling down and then scrolling up, it shows 2 lines under nav bar.

Tried to adjust the min-height...

Tried to add:

.is_stuck {

min-height: 111px;

}

I think, it fixes this issue.

Thank you