[Resolved] Mobile sticky header: scrolling not smooth

Home Forums Support Mobile sticky header: scrolling not smooth

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1055816
    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/

    screen shot

    #1055827
    David
    Staff
    Customer Support

    Hi there,

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

    #1055837
    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)

    #1055840
    David
    Staff
    Customer Support

    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;
    }
    #1056477
    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?

    #1056642
    David
    Staff
    Customer Support

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

    #1056658
    Hashbeer

    Yes.

    AutoOptimize – Disabled.

    #1056676
    David
    Staff
    Customer Support

    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.

    #1056702
    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/

    #1056730
    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.

    #1057242
    David
    Staff
    Customer Support

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

    #1057462
    Hashbeer

    Disabled and cache cleared.

    Feeling still have small jumb.

    #1057644
    David
    Staff
    Customer Support

    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

    #1057984
    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…

    #1058008
    Hashbeer

    Tried to add:

    .is_stuck {

    min-height: 111px;

    }

    I think, it fixes this issue.

    Thank you

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.