Primary Navigation overlaps right sidebar

Hi there,

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

You can use the private information field.

Let me know :)

Please check the private info field. Thanks.

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.

Thanks for your quick answer!

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

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;
    }
}

Worked! Thanks for your support!

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

Thanks!

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 :)

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

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/

That worked great Leo! Thanks for your amazing support!

No problem :)

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!

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

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