[Resolved] Mobile sticky header: scrolling not smooth

[Hashbeer]

Hi,

I have added 2 buttons in mobile header using hook. But when scrolling some extra space before the button and not smooth. Can you please have a look.

Thanks in advance.

Url: http://notarydev.farahatco.net/

[David]

Hi there,

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

[Hashbeer]

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)

[David]

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;
}

[Hashbeer]

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?

[David]

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

[Hashbeer]

Yes.

AutoOptimize – Disabled.

[David]

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.

[Hashbeer]

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/

[Hashbeer]

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.

[David]

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

[Hashbeer]

Disabled and cache cleared.

Feeling still have small jumb.

[David]

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

[Hashbeer]

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…

[Hashbeer]

Tried to add:

.is_stuck {

min-height: 111px;

}

I think, it fixes this issue.

Thank you

[Author]

Posts