Archived topic
Hide when scrolling down only for the mobile
9 replies · Started by Diogenes on August 7, 2019
Hi.
Is it possible to apply the option in the sticky navigation: Hide when scrolling down, only for the mobile version?
My sticky bar is set to: Use Navigation as Header, in the Header options.
Try this: https://generatepress.com/forums/topic/hide-when-scrolling-down-only-for-mobile/ but it didn't work.
I would appreciate the help.
Hi there,
can you activate the Hide on Scroll down option and i can take a look at the necessary CSS
Ready David, I already activated it.
If I don't mention it, I want to keep the sticky bar as it was until now (in the desktop version)
Thank you.
Try this CSS:
@media (min-width: 768px) {
.sticky-enabled .main-navigation.is_stuck {
top: 0 !important;
}
}
Thanks David, it works.
But he makes a leap by making the transition to the sticky bar.
In the normal version (Use Navigation as Header), the transition to the sticky bar is smooth and without that jump.
I am not seeing the 'jump' on the site. Is this when you're logged in or any particular browser?
On the Blog page you can see the jump in the sticky bar.
I use Chrome in its latest version, with incognito navigation.
I leave you some videos:
With jump (css code you passed me):
https://pasteboard.co/IrNxWrL.gif
Normal version (as originally):
https://pasteboard.co/IrNzsdK.gif
hmmm... there isn't much that can be done about that unfortunately - the CSS clashes with the JS styles. Not currently a way of adjusting the Sticky JS script for viewport sizes.
I understand David. For now I will return to how I was at the beginning.
Thanks anyway.
Greetings.
You're welcome - sorry there isnt a solution