[Resolved] Primary Navigation overlaps right sidebar

[Victor]

Hi!
When I scroll down Primary Navigation Menu hides, the right sidebar is ok. The problem is when I scroll up and the menu resumes, it overlaps the sidebar.
I would like the right sidebar to move down (when I scroll up) so that the Primary Navigation Menu does not overlap the sidebar.
How can I solve this issue?
Thanks!
Victor

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Victor]

Please check the private info field. Thanks.

[David]

Hi there,

you will need to increase the Top value in your CSS:

.sticky-block {
    position: -webkit-sticky;
    position: sticky;
    top: 5px; /* Increase value */
}

Without adding JS there is not way to make that change when the nav is sticky.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Victor]

Thanks for your quick answer!

Is there a way to make the nav starts from 30% from the right side?

[David]

You can try this CSS so the sticky nav is only as wide as the main content:

@media(min-width: 769px) {
    #sticky-navigation {
        background-color: transparent;
    }
    #sticky-navigation .inside-navigation {
        margin-right: calc(20% - 20px);
        background-color: #fff;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Victor]

Worked! Thanks for your support!

[Victor]

Hi! Could you please tell me how to hide this effect for certain pages (the ones that do not have sidebars)?

Thanks!

[Ying]

Hi Victor,

You could add this selector body.right-sidebar in front of #sticky-navigation with a space in between to only target the pages with right sidebar.

Let me know 🙂

[Victor]

Thanks, Ying! It worked great!
Last one…there is still a line at the bottom…how can take it out?

[Leo]

I believe this CSS is what you are after:

.sticky-enabled .main-navigation.is_stuck {
    box-shadow: none;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Victor]

That worked great Leo! Thanks for your amazing support!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Victor]

Hi!
Now the right sidebar is overlapping the footer when I scroll down till the very bottom.
Do you how to solve this issue?
I mean, make the bar move up when it reaches the footer…
Thanks!

[David]

You can add some padding to the bottom of the right sidebar to stop that:

#right-sidebar {
  padding-bottom: 40px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts