Sticky menu appears always, not just after scroll down

[tblogster]

I followed this tutorial to put a sticky menu in site built on Metro Pro theme.
http://my.studiopress.com/tutorials/sticky-menu/
Now the sticky menu works, but it is also there when you load the page, even before you start scrolling. that means it covers the header and is redundant.
What can i do to make it appear only after a certain amount of scrolling?

Note: the tutorial css code included a "display: none" which i had to delete, otherwise the sticky menu would never appear at all.

Thanks for your help!

http://sephardicvoice.com/

[Lauren @ OnceCoupled]

If the menu never appeared without you manually removing the "display: none" code, that means your javascript wasn't working. The javascript will dynamically turn on and off the "display: none", so you need that code after all. Then, have a closer look at if your javascript is being included properly!

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[tblogster]

Thanks for your response, Lauren.
I followed the tutorial for the javascript file.
the file path is /public_html/wp-content/themes/metro-pro/js/sticky-menu.js
That seems to be correct.
The content of the js file were copied from the tutorial:

jQuery(function( $ ){
$(window).scroll(function() {
var yPos = ( $(window).scrollTop() );
if(yPos > 200) { // show sticky menu after screen has scrolled down 200px from the top
$(".nav-secondary").fadeIn();
} else {
$(".nav-secondary").fadeOut();
}
});
});

So what have I done wrong?

[Lauren @ OnceCoupled]

When I load your site, I don't see the javascript file being called. You need to check that the file is located in the correct place, and that it's being enqueued.

Also, when you post code, use the proper code tags around it. This will display it properly, and prevent it from (potentially) breaking readers' sites.

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[tblogster]

It is in the right place, according to the tutorial. and the enqueue command is in the functions.php
so what do i do?

[Lauren @ OnceCoupled]

If I go to http://sephardicvoice.com/wp-content/themes/metro-pro/js/sticky-menu.js, I do not see your file.

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[tblogster]

good point. you can see it there now.
still now sticky menu.
thanks for your help on this!

[Author]

Posts