[Resolved] Primary Navigation overlaps right sidebar

Home Forums Support [Resolved] Primary Navigation overlaps right sidebar

Home Forums Support Primary Navigation overlaps right sidebar

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1617655
    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

    #1617733
    Leo
    Staff
    Customer Support

    Hi there,

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

    You can use the private information field.

    Let me know πŸ™‚

    #1619673
    Victor

    Please check the private info field. Thanks.

    #1619905
    David
    Staff
    Customer Support

    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.

    #1620145
    Victor

    Thanks for your quick answer!

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

    #1620247
    David
    Staff
    Customer Support

    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;
        }
    }
    #1620281
    Victor

    Worked! Thanks for your support!

    #1620541
    Victor

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

    Thanks!

    #1620550
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1620632
    Victor

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

    #1620716
    Leo
    Staff
    Customer Support

    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/

    #1622221
    Victor

    That worked great Leo! Thanks for your amazing support!

    #1622646
    Leo
    Staff
    Customer Support
    #1636586
    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!

    #1636684
    David
    Staff
    Customer Support

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

    #right-sidebar {
      padding-bottom: 40px;
    }
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.