[Resolved] iphone doesn't work sticky navigation with navigation search

Home Forums Support iphone doesn't work sticky navigation with navigation search

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1196598
    Hakjun

    Hi, I tested secondary navigation with navigation search.
    all good to pc web browser
    but iphone and ipad safari does’t work.

    case 1.
    1. secondary navigation’s search button click
    2. scrolling down
    3. sticky strange working

    case 2.
    1. scrolling down
    2. sticky good working

    do not any other plugins for sticky.
    only use php code snippet for secondary navigation search
    and alignment css for search bar.

    I think it’s because of the iphone or ipad’s Safari browser default header value.

    how can I fixed that…reply plz.

    theme: 2.4.1
    GP Premium: 1.9.1

    #1196821
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Not sure I’m seeing this – can you make a quick screenshot/video of the issue as you’re seeing it so we can replicate?

    Does it happen if the navigation search is in the primary navigation?

    #1196827
    Hakjun


    Thanks to reply.
    It happens on the iPhone or iPad safari.
    Sticky doesn’t work when the search bar is active.
    I tested primary navigation search bar with sticky, it’s same result.
    doesn’t work on mobile devices(iphone, ipad safari).
    fine work on macbook safari…

    #1196974
    David
    Staff
    Customer Support

    Hi there,

    does it still happen if you remove this CSS:

    .nav-search-active {
        top: 25px;
    }
    #1196996
    Hakjun

    Hi David,
    I removed the CSS code and tired again, but it is the same.

    youtube

    Youtube video’s CSS is removed the CSS code. now I did it as it was

    only mobile devices appeared that sticky bug..

    If there is no solution, I will rebuild the searchbar like admin searchbar…(I wish)
    or…When scrolling starts, I need to put a script that deactive the search bar.

    #1197428
    David
    Staff
    Customer Support

    Give this CSS a try:

    @media (max-width: 768px) {
        .secondary-navigation .inside-navigation {
            display: flex;
            flex-direction: column-reverse;
        }
        .navigation-search.nav-search-active {
            position: static;
            width: 100%;
        }
    }
    #1197901
    Hakjun

    I tried with the CSS you gave, but only the secondary menu is split to the top, and the sticky works the same.

    #1198226
    David
    Staff
    Customer Support

    The Sticky javascript relies on a clone element to stop the ‘page’ from jumping when scroll. So i think this issue is unavoidable when the search from is above the sticky nav.

    Instead i would:

    1. Use the CSS here as this removes the need to absolute position the search bar, which can cause issues.

    2. Disable the Sticky Nav option and use this CSS instead:

    #site-navigation {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    #1198266
    Hakjun

    I tried applying it as you told me, but I decided to use it in a different way
    because the sticky function itself didn’t work as desired.
    Thank you for your help.

    #1198306
    David
    Staff
    Customer Support

    Glad to hear you found a solution that works for you!

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