- This topic has 21 replies, 5 voices, and was last updated 5 years, 10 months ago by Leo.
-
AuthorPosts
-
May 6, 2017 at 5:01 pm #314837shirtcreator24
Hello,
Is it possible to make the Primary Navigation sticky just for specific pages or posts?
Greetings
Markus
May 6, 2017 at 6:16 pm #314841LeoStaffCustomer SupportHi 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 π
May 7, 2017 at 4:33 am #314936shirtcreator24Hi 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
May 7, 2017 at 7:45 am #314976LeoStaffCustomer SupportGlad you found the solution π
May 7, 2017 at 11:22 am #315031TomLead DeveloperLead Developer#sticky-navigation
only applies to the fade and slide transitions.For a selector that works with all three transitions,
.navigation-stick
can be used.May 7, 2017 at 12:19 pm #315083shirtcreator24Thank 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
May 31, 2018 at 7:42 am #588766FranciscoHello!
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/
May 31, 2018 at 7:58 am #588855DavidStaffCustomer SupportHi 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?
May 31, 2018 at 8:26 am #588869FranciscoWell, 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!May 31, 2018 at 8:29 am #588873DavidStaffCustomer SupportOK, 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.
May 31, 2018 at 8:31 am #588875FranciscoUm… 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!
May 31, 2018 at 8:53 am #588886DavidStaffCustomer SupportFirst 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.
May 31, 2018 at 9:01 am #588894FranciscoUm… 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?
May 31, 2018 at 9:15 am #588905LeoStaffCustomer SupportHmm 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.
May 31, 2018 at 9:18 am #588907DavidStaffCustomer SupportOk, 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; }
-
AuthorPosts
- You must be logged in to reply to this topic.