Archived topic
Smooth scroll conflicting with search bar focus
6 replies · Started by John on December 29, 2021
Hello,
I recently had an issue with anchor links within an article. Basically, the page would scroll too far when clicking such a link and the sticky navigation would cover up the item it was attempting to scroll to. Using the forums here I found the solution was to turn on smooth scrolling (https://generatepress.com/forums/topic/jump-too-anchors-headings-covered-by-stick-navigation/). Which I did and it seemed to fix that issue.
However, that solution caused a new issue... it makes it so when I click the search bar at the top of my site, the "focus" is not on the search bar and the user has to manually click within the text-input field to begin typing their search.
Any way to correct this so the smooth scroll still works AND the focus defaults to the search field when the user clicks the search icon in the menu bar?
Thanks!
John
Hi John,
That doesn't look like GP default behavior, can you try disable all plugins except GP premium to test?
If you are using a child theme, can you switch to parent theme as well?
Let me know :)
Yes I have disabled all plugins to test. The problem is resolved when I disable the plugin "Code Snippets" specifically, it will also resolve when I disable this code snippet that I used (as directed by one of the support form threads on this site as a way to enable smooth scroll on all posts to avoid having to manually edit every article to enable it):
<?php
add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
$elements[] = 'a[href*="#"]';
return $elements;
} );Other than disabling that one snippet within that one plugin, disabling any other plugin on my site will not resolve the issue.
Hi John,
On this code, can you try replacing the value:
a[href*="#"]
To this:
a[href^="#"]:not([href="#"])
And see if it works?
Works great! And smooth scroll still works too! Thank you!!!
Glad it works perfectly now. No problem.
Happy new year! :D
would it be possible to add the above solution to this page:
https://docs.generatepress.com/article/generate_smooth_scroll_elements/
I've had three things affected by using the suggested code on that page and it took me quite a while to debug in each case
Thanks!
