iphone doesn't work sticky navigation with navigation search

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?

[img]
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...

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

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.

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.

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.

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