Make sidebar extend to bottom and fixed

Hello wpmudev, I am kindly requesting for assistance to make sidebar fixed and extend to bottom of the page. For example like here and in the image

  • Kasia Swiderska
    • Support nomad

    Hello Schmirts,

    Do you mean sidebar on your site where access is open? Its already full height

    Can you point me to page where I can see that sidebar? And maybe you can describe more what you want to achieve, because there is few way of doing fixed scrollbar:

    https://css-tricks.com/scrollfollow-sidebar/
    http://stackoverflow.com/questions/31722839/flex-layout-with-fixed-position-no-scrolling-sidebar (with flex)
    https://webdesign.tutsplus.com/tutorials/sticky-positioning-with-nothing-but-css--cms-24042

    kind regards,
    Kasia

  • Schmirts
    • Site Builder, Child of Zeus

    Hello Kasia Swiderska , yes I want this for the site where access is open. There were too many widgets in the sidebar, but I will only be using two (I have changed that NOW ). What I am wanting is to have only two widgets in the sidebar and have the sidebar still reach the bottom of the page. For the best example, if you login to http://www.wordpress.com this is how it looks;

    I don't want fixed widget but fixed sidebar.

    As you can see in this image above (screenshot of inbox page ) , when the widgets end the sidebar ends, but I want the sidebar to reach bottom of screen even if there are only two widgets. It should be fixed so that even if user scrolls the sidebar looks exactly the same. Thank you for your assistance so far :smile:

  • Adam Czajczyk
    • Support Gorilla

    Hello Schmirtz!

    I'm still not quite sure if I understand your goal fully but try using this CSS please:

    #secondary {height:100%;}
    #secondary.widget-area {margin-top:0;padding-top:45px;}

    Let me know if this helps and/or how does it related to what you wish to achieve.

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Schmirts!

    If the sidebar has a lot of widgets (8 for example) then there should be scroll bar in sidebar.

    The sidebar actually should expand in height in that case but if you wish to limit that height and instead put a scrollbar there try replacing this rule:

    #secondary {height:100%;}

    with this one:

    #secondary {height:100%;max-height:800px;overflow-y:auto;}

    where the "max-height" is the maximum allowed height of the sidebar in pixels; be sure to replace that with value that suits your design.

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Schmirts!

    Thanks you for that example, that's a bit different indeed :slight_smile:

    There's however one more difference between your site and the example one: as you can see there's no "full width" footer and header on the example site.

    On your site, there are both footer and header and that changes the way we should be addressing that. My point is that if you wish to achieve precisely the same effect/sidebar behavior as on that example page you would need to change the page template structure (that'd be a bit outside the scope of the forum to provide you with a ready one). Or - switch to a theme such as "Twenty Fifteen" default WP theme that features a sidebar similar to this.

    I'll be of course more than happy to help you with CSS for your current theme but I think I'd like to know first how would you like to handle that "100% fixed/sticky" sidebar in case of both your footer and header being there:

    - should it "overlay" header and footer and just be full height (hiding some part of the footer and header)?
    - or should it fit in between "header and footer" (but then it may be difficult to make it "stick to the screen" because it would go over/under footer/header while page is scrolled)

    Could you please let me know about that?

    Best regards,
    Adam

  • Schmirts
    • Site Builder, Child of Zeus

    HELLO Adam Czajczyk thank you so much for explaining so nicely. Looking at your explanation of the possible ways to proceed I have decided to remove the footer completely.

    should it "overlay" header and footer and just be full height (hiding some part of the footer and header)?

    I don't mind the sidebar overlaying the header (there will be no footer anymore), however I prefer having the sidebar under the header.
    Visually this the preferred end result:

    If you can get me anywhere close to this, I will be ecstatic! Basically I trust your judgment and feel its best we proceed as per your recommendation. So Lets go with the method you feel is most practical for achieving results shown in the image (or at least similar).
    -Does removing the footer help? (I dont need the footer so I dont mind removing it)

  • Dimitris
    • Support Star

    Hey there Schmirts,

    hope you're doing good and don't mind chiming in! :slight_smile:

    After inspecting your website a while, I noticed that apart from footer which is still in place, the following CSS rule is used for main content area.

    #primary {
      min-height: 100vh;
    }

    Which means that primary content will be at least equal to current viewport height.
    Reference: http://www.w3schools.com/cssref/css_units.asp

    You can use the same units for the sidebar too, by using something like this instead of previous snippets:

    #secondary {
      min-height: 100vh;
      margin-bottom: -45px;
      overflow-y: auto;
      position: fixed;
    }

    This will ensure that main content and sidebar will be at least full-height.
    Feel free to play along with this CSS via your theme options custom CSS section or a plugin like this and also remove the unnessacery footer.

    Warm regards,
    Dimitris

  • Dimitris
    • Support Star

    Hello Schmirts,

    I would like to inform you that the #primary 100vh was only there for temporary time. Its gone now. Will the code snippet you provided still work?

    I'm afraid not, these two rules should stay in place as one to work properly.

    #primary {
        min-height: 100vh;
    }
    #secondary {
      min-height: 100vh;
      margin-bottom: -45px;
      overflow-y: auto;
      position: fixed;
    }

    Cheers,
    Dimitris

  • Adam Czajczyk
    • Support Gorilla

    Hello Schmirts!

    I can see that Dimitris helped you deal with sidebar which is great but I must say I got a bit lost. I can see that you header now is "kind of sticky": at first there's that "blue" one and upon page scroll it's replaced with "yellow" one. With current CSS it looks that the sidebar/widget area is indeed a bit "out of place": it's moved down creating a gap between header and itself.

    Then, if it's only about removing that gap I think a bit of (some "trial and error" tries may be necessary) manipulating of the "#secondary" margin-top values should do the trick. I see that if you set "margin-top" to "0" it works nice with "blue" header but there's still a gap with "yellow" header.

    This is because both these headers are of different height. Surely making their height equal would solve the issue but I can image that it may not suit your design-needs. A assume though that this transition from "blue" to "green" header is triggered with some JS. Can you tell me please whether it's a 3rd-party plugin (if so, which one) or the theme feature or a custom code (if so, share it please)?

    Best regards,
    Adam

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Schmirts!

    The plugin explains the yellow header well :smiley: Let's then try to set that up with CSS only :slight_smile:

    To make your blue header "sticky" you need to make it a "fixed" element so the first CSS rule to add would be this:

    /* make header sticky */
    .site-header {position:fixed;}

    A "fixed" element however goes "out of the flow" so need to move the rest of the site down:

    /* move the rest of the page down */
    .site-content {padding-top:55px;}

    and also adjust sidebar:

    /* adjust sidebar position */
    #secondary {margin-top:13px;}

    After you add all three rules above (in this order) to your CSS you should get a sticky/fixed blue header, a site content that's not hidden behind the header initially and the sidebar that's nicely stretched between the header and the bottom of the page. You may want to adjust "padding-top" and "margin-top" values there so please note: they are interconnected so if you for example decrease the "padding-top" for ".site-content" you will want to increase the "margin-top" for "#secondary" and vice versa.

    Give it a try and I think you should be able to set it the way it suits your needs :slight_smile:

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.