[Resolved] Sidebar elements intrude footer

Home Forums Support [Resolved] Sidebar elements intrude footer

Home Forums Support Sidebar elements intrude footer

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2329324
    Drew

    Hi, I have a problem when scrolling down the page, if I have a sidebar element that is set as a fixed element, it will intrude the footer. Is there a way to prevent it from doing that?

    #2329338
    David
    Staff
    Customer Support

    Hi there,

    are you using code or a plugin to make that widget sticky ?
    As that is using Javascript to fix the sidebars position, so stopping that from happening is not easy.

    If you can remove whatever it is you’re using to make it stick, and ill provide a pure CSS method that will fix the issue.

    #2329351
    Drew

    Hi David, yes I am using a plugin called “fixed widget”.

    #2329355
    David
    Staff
    Customer Support

    Are you only using that for the last widget in the right sidebar ?
    If so can you disable it ?

    #2329392
    Drew

    That’s correct, it’s just for the last widget. Disabling now.

    #2329404
    David
    Staff
    Customer Support

    Try adding this CSS:

    @media(min-width: 769px) {
        .site-content {
            display: flex;
        }
        .inside-right-sidebar {
            height: 100%;
        }
        .inside-right-sidebar :last-child {
            position: sticky;
            top: 150px;
        }
    }
    /* adjust sticky top on larger screens */ 
    @media(min-width: 1070px) {
        .inside-right-sidebar :last-child {
            top: 100px;
        }
    }
    

    The top value is what sets how far from the top of the viewport the widget will stick.
    The first value covers the taller header on smaller screens.

    #2329413
    Drew

    Thanks David. Will this apply to the entire site? Some posts have a custom sidebar.
    Also, best way to add this CSS? I don’t believe I have any CSS on the site yet.

    #2329440
    David
    Staff
    Customer Support

    That CSS will apply everywhere – how do you know which posts have a different sidebar ? Do they have a specific taxonomy or something ?

    #2329446
    Drew

    I use a plugin called Content Aware Sidebars that allows me to make a custom sidebar for specific pages. I have about 10 pages with a custom sidebar.

    #2329452
    David
    Staff
    Customer Support

    Ok,

    1. In Appearance > GeneratePress, activate the Elements module.
    2. In Appearance > Elements -> Add New Hook Element.
    2.1 in the hook text area add:

    
    <style>
    @media(min-width: 769px) {
        .site-content {
            display: flex;
        }
        .inside-right-sidebar {
            height: 100%;
        }
        .inside-right-sidebar :last-child {
            position: sticky;
            top: 150px;
        }
    }
    /* adjust sticky top on larger screens */ 
    @media(min-width: 1070px) {
        .inside-right-sidebar :last-child {
            top: 100px;
        }
    }
    </style>
    

    2.2 Set the Hook to: wp_header
    2.3 Set the Display Rules > Location to Post > All Posts.
    2.4 Set the Display Rules > Exclusions to the post you DON’t want a sticky widget on.**
    2.5 Publish the element.

    ** Note this is only required if they are Posts, don’t bother if they are Pages.

    #2329663
    Drew

    Thanks David, that worked perfectly!

    #2329671
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.