Sticky Primary Navigation for specific pages?

Hi Markus,

Couple ways to do this. First way is easier and the second way is cleaner in my opinion but they both work the same.
1. Install Simple CSS: https://docs.generatepress.com/article/adding-css/#simple-css, then on the pages/posts where you want to hide the sticky navigation, add the CSS below to the Simple CSS meta box so they only apply to that page:

#sticky-navigation {
    display: none;
}

2. Get the page/post ID of the pages/posts you want to hide the sticky navigation, then add the CSS below to the global CSS editor:

.page-id-xx #sticky-navigation,
.page-id-xx #sticky-navigation {
    display: none;
}

You would have to replace xx by the actual ID number but this way you could add as many pages as you want and just separate them by a comma.
Adding CSS: https://docs.generatepress.com/article/adding-css/

If you can provide a link to your site and let me know which pages/posts you would disable sticky navigation I can provide the full code for you to copy and paste as well.

Let me know if you need more info :)

Hi Leo,

thank you for your quick response, it doesn't work for me, don't know why? :-(

But this works fine for me :-) :

.page-id-XX .main-navigation.is_stuck,
.page-id-XX .main-navigation.is_stuck {
display: none;
}

Greetings

Markus

Glad you found the solution :)

#sticky-navigation only applies to the fade and slide transitions.

For a selector that works with all three transitions, .navigation-stick can be used.

Thank you again Leo and Tom!

"#sticky-navigation only applies to the fade and slide transitions." That was the reason why it doesn't work for me.

".navigation-stick" works fine.

Sticky: goo.gl/Pe3oFP

Without Sticky: goo.gl/a5EMx2

My favorite WP Theme? GeneratePress! Best support? GeneratePress Team ;-)

Markus

Hello!
I am dealing with something similar. I would like to disable sticky navigation just for single page. I have tried this:

.page-id-554 .navigation-stick {
display: none !important;
}

and it's working. By the way, if I don't use "!important", is not working.
The problem now is that I don't want to disable normal navigation after scrolling; I mean, I would like to see main navigation when I will scroll top again and right now I loose my main navigation when scrolling down...
Could you help me, please?

This is the url: https://www.gatobengali.net/inicio/

Hi Francisco,

sorry i am a little confused. The Sticky navigation is a clone of the Primary navigation. So the code you have added has removed that. How do you want the navigation to behave when scrolling up / scrolling down?

Well, the code removes the clone, bet I would like not to remove the primary navigation, which is actually shown at the beginning, but it disapears when scrolling. I would like the navigation behaves as in a page without sticky navigation, but just for that specific page. I don't know if I am explaining myself... sorry.
By the way, in that page I have merged a personal header with theme header. Maybe that is the reason of the problem.
Thank you!

OK, i think i know what you mean. So on that page, you would like the 'sticky' navigation to remain transparent? Instead of the solid background color as on other pages.

Um... that could be a solution. My first idea was to try to disable sticky navigation just for that page and keep the normal navigation, but maybe your solution will also work. Let's try it!

First thing, the Sticky navigation gets it's colors from the Customiser > Colors > Primary navigation, so any changes there will be reflected on the sticky. So to just make this pages sticky navigation transparent you can replace the code with this:

.page-id-554 .navigation-stick {
	background-color: transparent;
}

Let me know if this is correct and if you need different menu item styling on this page.

Um... Ok. This could be a solution, but we need to style sticky navigation a little bit more because "current item" in navigation and "hover state" still have color. Could you take a look?

Hmm try this for your overall CSS:

.page-id-554 .main-navigation.navigation-stick,
.page-id-554 .main-navigation .main-nav ul li[class*="current-menu-"] > a,
.page-id-554 .main-navigation .main-nav ul li:hover > a {
    background-color: transparent;
}

Alternatively we can disable the sticky navigation easily too if you that's the route you want to go.

Ok, so now try this:

.page-id-554 .navigation-stick,
.page-id-554 .navigation-stick .main-navigation .main-nav ul li[class*="current-menu-"] > a,
.page-id-554 .navigation-stick .main-navigation .main-nav ul li:hover > a {
	background-color: transparent;
}