[Resolved] Sticky Primary Navigation for specific pages?

Home Forums Support Sticky Primary Navigation for specific pages?

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #314837
    shirtcreator24

    Hello,

    Is it possible to make the Primary Navigation sticky just for specific pages or posts?

    Greetings

    Markus

    #314841
    Leo
    Staff
    Customer Support

    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 🙂

    #314936
    shirtcreator24

    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

    #314976
    Leo
    Staff
    Customer Support

    Glad you found the solution 🙂

    #315031
    Tom
    Lead Developer
    Lead 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.

    #315083
    shirtcreator24

    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

    #588766
    Francisco

    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/

    #588855
    David
    Staff
    Customer Support

    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?

    #588869
    Francisco

    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!

    #588873
    David
    Staff
    Customer Support

    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.

    #588875
    Francisco

    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!

    #588886
    David
    Staff
    Customer Support

    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.

    #588894
    Francisco

    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?

    #588905
    Leo
    Staff
    Customer Support

    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.

    #588907
    David
    Staff
    Customer Support

    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;
    }
Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.