- This topic has 9 replies, 3 voices, and was last updated 4 years ago by David.
-
AuthorPosts
-
March 16, 2020 at 10:10 am #1196598Hakjun
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 workingcase 2.
1. scrolling down
2. sticky good workingdo 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.1March 16, 2020 at 4:11 pm #1196821TomLead DeveloperLead DeveloperHi 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?
March 16, 2020 at 4:22 pm #1196827Hakjun[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…March 17, 2020 at 12:20 am #1196974DavidStaffCustomer SupportHi there,
does it still happen if you remove this CSS:
.nav-search-active { top: 25px; }
March 17, 2020 at 12:48 am #1196996HakjunHi 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.March 17, 2020 at 7:07 am #1197428DavidStaffCustomer SupportGive 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%; } }
March 17, 2020 at 6:39 pm #1197901HakjunI tried with the CSS you gave, but only the secondary menu is split to the top, and the sticky works the same.
March 18, 2020 at 4:47 am #1198226DavidStaffCustomer SupportThe 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; }
March 18, 2020 at 5:38 am #1198266HakjunI 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.March 18, 2020 at 6:08 am #1198306DavidStaffCustomer SupportGlad to hear you found a solution that works for you!
-
AuthorPosts
- You must be logged in to reply to this topic.