[Support request] Search Button Jumping back on sticky header

[Andrew]

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

[Andrew]

Not sure if I added the link my apologies

[Elvin]

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.

[Andrew]

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

[David]

Hi there,

are you using the Smooth Scroll function in the theme and any snippets related to that ?

[Andrew]

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

[David]

OK – if you temporarily remove those Snippet and CSS changes – does the issue go away ? Will help to narrow the issue down

[Andrew]

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

[Tom]

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.

[Author]

Posts