[Support request] Hide when scrolling down only for the mobile

[Diogenes]

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.

[David]

Hi there,

can you activate the Hide on Scroll down option and i can take a look at the necessary CSS

[Diogenes]

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.

[David]

Try this CSS:

@media (min-width: 768px) {
    .sticky-enabled .main-navigation.is_stuck {
        top: 0 !important;
    }
}

[Diogenes]

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.

[David]

I am not seeing the ‘jump’ on the site. Is this when you’re logged in or any particular browser?

[Diogenes]

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

[David]

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.

[Diogenes]

I understand David. For now I will return to how I was at the beginning.
Thanks anyway.
Greetings.

[David]

You’re welcome – sorry there isnt a solution

[Author]

Posts