Customizing sticky menu

What do you mean by too quickly? Do you want the sticky menu to appear after scrolling more pixels or you want to add a transition animation to make the appearance smoother?

Thanks benedicksahagun for your answer. Sorry my English. Yes, I want it to appear after scrolling more pixels. Now, the banner image appears below sticky menu and seems very strange.

On you child theme create copy of /js/libre.js. and then you can additional offset before adding the ‘sticking’ class to the body like :

var stickyHeaderOffset;
	var additionalOffset = 300;

	if ( adminBar > 0 ) {
		stickyHeaderOffset = stickyHeader.offset().top + additionalOffset - 32;
	} else {
		stickyHeaderOffset = stickyHeader.offset().top + additionalOffset;
	}

I think I’ve done well, but it don’t work. Thanks anyway for your quick answer.

Sorry for another answer. Your code works, but only if modified in parent theme /js/libre.js.

It’s however a solution. Thanks!

Reading WordPress forums, I found a solution for child theme javascript.

1) First of all, copy libre.js to child theme folder “/js” and rename it to “libre-child.js”

2) Edit the new “libre-child.js” in your child theme folder and change the code as benedicksahagun suggested. The first 22 lines should be:

(function($) {
	var stickyHeader = $( '.site-header' );
	var body = $( 'body' );
	var adminBar = libreadminbar; //localized in functions.php
	var stickyHeaderOffset;
	var additionalOffset = 300;

	if ( adminBar > 0 ) {
		stickyHeaderOffset = stickyHeader.offset().top + additionalOffset - 32;
	} else {
		stickyHeaderOffset = stickyHeader.offset().top + additionalOffset;
	}

	var stickyTime = function() {
		if( $(window).scrollTop() > stickyHeaderOffset ) {
			body.addClass( 'sticking' );
		} else {
			body.removeClass( 'sticking' );
		}
	}

	/* Remove border from linked images */

3) Change var additionalOffset = 300; number as needed.

4) Edit in child theme your “functions.php” and add this:

/** Custom javascript **/
add_action( 'wp_enqueue_scripts', 'libre_child_script', 20150624 );
function libre_child_script() {
wp_dequeue_script( 'libre-script', get_template_directory_uri() . '/js/libre.js', array( 'jquery' ), '20150623', true );
wp_enqueue_script( 'libre-script-child', get_stylesheet_directory_uri() . '/js/libre-child.js', array( 'jquery' ), '20150624', true );
$adminbar = is_admin_bar_showing();
wp_localize_script( 'libre-script-child', 'libreadminbar', array( $adminbar ) );
}

And that is all. I don’t know if adminbar localization lines are necessary, but just in case.

Thanks to benedicksahagun again.

You’re welcome! Also the adminbar thingy isn’t necessary and the name of the script can be the same. Actually it would work without making changes on functions.php if the parent theme was configured correctly for child themes ??

atuan – thanks for sharing your detailed child-theme solution in case it helps others, and thanks benedicksahagun for lending a hand to atuan!