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

Home Forums Support [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
  • #1196598

    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

    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?


    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…

    Customer Support

    Hi there,

    does it still happen if you remove this CSS:

    .nav-search-active {
        top: 25px;

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


    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.

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

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

    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;

    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.

    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.