Archived topic
Search Button Jumping back on sticky header
8 replies · Started by Andrew on January 19, 2022
Hello, I noticed when looking at this on mobile when the header is sticky it jumps back to the top of the page, and also it appears the styling is off. Is there anyway to fix this. I'm using the code below.
Code in functions.php
add_filter( 'generate_navigation_search_output', function() {
printf(
'<form method="get" class="search-form navigation-search" action="%1$s">
<input type="search" placeholder="Enter your search" class="search-field" value="%2$s" name="s" title="%3$s" stlye="color:#000000;" />
</form>',
esc_url( home_url( '/' ) ),
esc_attr( get_search_query() ),
esc_attr_x( 'Search', 'label', 'generatepress' )
);
} );
CSS code
@media (min-width: 1241px) {
form.search-form.navigation-search.nav-search-active {
background-color: #ffffff;
width: 325px;
margin-left: auto;
border: 1px dotted #000000;
margin-right: 56px;
color:#000000!important;
}
}
nav#sticky-navigation form.search-form.navigation-search.nav-search-active {
top: 50%;
transform: translateY(-50%);
}
.navigation-search input[type="search"] {
outline: 0;
border: 0;
vertical-align: bottom;
line-height: 1;
opacity: 0.9;
width: 100%;
z-index: 20;
border-radius: 0;
-webkit-appearance: none;
height: 60px;
color: #000000;
color: #000000!important;
}
Not sure if I added the link my apologies
Hi Andrew,
I'm not sure I'm seeing the issue here.
I've tested the site on a Chrome - Android phone and it doesn't seem to be jumping back to the top of the page when I open the search form.
Can you provide the device name and the browser you've tested it on? Perhaps it's a vendor specific issue. Or perhaps you've sorted this out?
As for the styling, can you provide an image of what it's supposed to look like?
Let us know.
Hi Elvin, My apologies I should have been more specific. I only experience the issue when I'm on a phone. To be specific, I'm on a iphone 12 Pro, and using the default safari browser. Please see the attached video
Hi there,
are you using the Smooth Scroll function in the theme and any snippets related to that ?
Hi David, thanks for the speedy reply. I just looked and the smooth scroll under general isn't checked. And the only customizations I have done are the ones listed above, with the filter in the functions.php files and then just some CSS
OK - if you temporarily remove those Snippet and CSS changes - does the issue go away ? Will help to narrow the issue down
Hi David,
I removed the Snippet and the CSS/Cleared Cache, and it appears to be doing the same thing. I copied the site over to a staging area to test this out. Seem to work fine on a computer, just not the phone when the header sticks
Hi there,
This is an iOS-specific issue. When iOS opens the keyboard, it causes a bug with sticky search forms.
Our "solution" at this time is to scroll to the top in order to prevent the bug. It's not ideal, but we are looking at some other alternatives.
