[Resolved] Disable sticky header navigation whilw scrolliong on posts only in mobile

[Ruth Kijner]

Hello,
I configured navigation as a header, and the header navigation is sticky.
Now I want to hide the navigation header when scrolling down in posts/articles on mobile.

My first question is: Is it possible to hide the navigation header during scrolling down in all posts instead of doing this one by one?

My second question is: How to hide the navigation header during scrolling down on mobile?

I followed the instructions in topic https://generatepress.com/forums/topic/sticky-primary-navigation-for-specific-pages/

1. I tried to disable the sticky navigation in a specific article: https://www.perfectinvest.net/why-financial-literacy-is-important/
with the following CSS: .page-id-59 #sticky-navigation {display: none;} but it didn’t work.
(That CSS works great for home and about pages but not in education, top lists, and posts pages)

2. I installed the Simple CSS plugin and added #sticky-navigation {display: none;} inside post, and it works great on desktop version but it doesn’t affect the mobile navigation header.

3. Just as mentioned in the article: https://docs.generatepress.com/article/sticky-navigation/#hide-when-scrolling-down
I disabled sticky navigation it didn’t affect only the mobile version.
I need your help.

Thank you in advance

[Tom]

Hi there,

What if you do this?:

.page-id-59 .navigation-stick,
.page-id-59 #sticky-placeholder {
    display: none !important;
}

Let me know 🙂

[Ruth Kijner]

Hello Tom,
Thank you for your reply.

I added the CSS you suggested, it took effect on desktop but not on mobile.

I can control the behavior of the navigation only from Customize –> Layout –> Header.
If I choose: Hide when scrolling down, or disabling sticky navigation. It’s actually the works great.

I can’t find a way to disable sticky navigation or hide it when scrolling on specific pages

Maybe you have other suggestions?

Thank you so much in advance.

[Tom]

Which page can I check out? That CSS should work on mobile as well.

[Ruth Kijner]

Hello Tom,

It should work on posts pages like https://www.perfectinvest.net/why-financial-literacy-is-important/
Page ID:59

Thank you!

[Tom]

Let’s try removing the sticky script completely, instead of using CSS:

add_action( 'wp_enqueue_scripts', function() {
    if ( is_page( 59 ) ) {
        wp_dequeue_style( 'generate-sticky' );
        wp_dequeue_script( 'generate-sticky' );
    }
}, 150 );

[Ruth Kijner]

Hello Tom,
I deleted all CSS related to the sticky navigation. and added the PHP script to the snippet plugin, but it’s still not affecting the mobile.

[Tom]

Can you deactivate your caching/minifying plugin so I can take a closer look at the source?

[Ruth Kijner]

Hello Tom, I deactivated the caching/minifying plugin.

[Tom]

Ah, it’s a post.

Try this:

add_action( 'wp_enqueue_scripts', function() {
    if ( is_single( 59 ) ) {
        wp_dequeue_style( 'generate-sticky' );
        wp_dequeue_script( 'generate-sticky' );
    }
}, 150 );

[Ruth Kijner]

Hello Tom,

It’s working great, how can I apply this also on other posts?

Thank you

[David]

Hi there,

Do you want to apply this to all posts ? If so this

if ( is_single( 59 ) ) {

becomes:

if (is_singular('post')) {

Or if you want to specify a list of posts by ID then this:

if ( is_single(array(59, 69, 79)) ) {

[Ruth Kijner]

It’s working great, it’s so exciting! Thank you so much for all the help!

[David]

Thats wonderful to hear 🙂 Glad we could be of help

[Author]

Posts