Hi, I have created a page with a transparent header which changes to the normal header once you start to scroll down the page. But i want to be able to keep the header transparent a little longer once you start scrolling which im guessing is changing some kind of pixel height maybe?
If you take the Enfold 2017 theme for example, once you start to scroll the normal header shows & i would like to make the scroll longer before the header changes.
I hope im making sense lol.
Thank you.
Hey apicalmedia,
Sorry for the late reply, this function can be changed in the file: \enfold\js\avia-snippet-sticky-header.js
on about line 110 change the current “50” to suit:
I would recommend copying this file to your Child Theme in a directory named /js/ so that you won’t lose changes during future updates.
Then add this code to the end of your child theme functions.php file in Appearance > Editor:
function wp_change_sticky_header_js() {
wp_dequeue_script( 'avia-default', $template_url.'/js/avia-snippet-sticky-header.js', array('jquery'));
wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia-snippet-sticky-header.js', array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'wp_change_sticky_header_js', 500 );
and then ensure to clear your browser cache and any caching plugin, and also go to your Enfold Theme Options > Performance > JS file merging and compression and deactivate it and check the box at the bottom of the page Delete old CSS and JS files If it still is not working for you please check for any server side caching.
Best regards,
Mike