Archived topic
Disable sticky header navigation whilw scrolliong on posts only in mobile
13 replies · Started by Ruth Kijner on April 15, 2020
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
Hi there,
What if you do this?:
.page-id-59 .navigation-stick,
.page-id-59 #sticky-placeholder {
display: none !important;
}Let me know :)
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.
Which page can I check out? That CSS should work on mobile as well.
Hello Tom,
It should work on posts pages like https://www.perfectinvest.net/why-financial-literacy-is-important/
Page ID:59
Thank you!
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 );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.
Can you deactivate your caching/minifying plugin so I can take a closer look at the source?
Hello Tom, I deactivated the caching/minifying plugin.
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 );Hello Tom,
It's working great, how can I apply this also on other posts?
Thank you
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)) ) {
It's working great, it's so exciting! Thank you so much for all the help!
Thats wonderful to hear :) Glad we could be of help
