Archived topic
Sticky Navigation - Hide when scrolling down
11 replies · Started by Damir on April 12, 2021
Hi,
I have one problem with this feature. Sticky menu only appears at top part of the page, for example when you are at bottom of the page and start to scroll up.. nothing happens until you don't reach top part and then menu appears.
I also notices that there is no difference which transition mode I select (none, fade or slide).
Hi there,
Strange, something on the page is preventing the javascript from detecting the upward scoll event.
Does the same thing happen on a regular block editor page with nothing but paragraph blocks (lorem ipsum)?
Hi Tom, Do you have this behaviour on your demo installation. I think this is theme related (or generate premium because JS code for this functionality is there). Tried with all plugin disabled (even there are 3 plugins now) and without child theme, same behaviour.
Can you please see what's going on because seems it's not working properly...
btw. attached is link to regular page with lorem ipsum, same thing:
Thanks!
Hi there,
The sticky js script works well on my end. See this sandbox site. https://dev-generate-press.pantheonsite.io/
Can you try reinstalling WordPress 5.7 and see if it works.
Make sure page cache is purged as well (if your host does that). Let us know how it goes.
Hi Elvin, this is not the same sticky menu... You have menu there all the time... Have you tried with option "Hide when scrolling down" turned on?
btw. I don't have any cache currently activated.
Hi there,
did you try what Tom asked to test the sticky nav on a standard WP editor page - ie. no page builder and just some lorem ipsum content?
Hi David,
yes I already attached that page example. I'm attaching URL again.
Sorry the link didn't come through earlier.
Can you temporarily disable the Child Theme as i can see a custom stylesheet and JS file being loaded on that page.
Child theme and all plugin except GP premium are disabled.
Ok - found the issue.
there is a widgets.css style sheet being loaded by calendly.
It is adding this CSS:
html, body {
height: 100%;
}
Disabling that CSS fixes the issue.
You can overwrite it the style sheet by using:
html, body {
height: initial !important;
}
Hi David,
you are right.. I never thought Calendly could cause this, but good to know. Thank you for help!
Awesome - glad we could be of help!