Bootstrap 4 sticky-top not working properly

Question

I need to make the sidebar stick to the top. This works when the screen is smaller than the sm breakpoint, but larger than that, it doesn't stick. I thought the culprit could be the order of the class names, so I tried moving them but same results.

sticky-top works with col-sm-* but not with col-*. Why?

My code is in HAML and SCSS, I hope that's okay. Refer to this pen

.container
  %ul.nav
    %li.nav-item
      %a.nav-link{:href => "#"}
        Menu
    %li.nav-item
      %a.nav-link{:href => "#"}
        Active
    %li.nav-item
      %a.nav-link{:href => "#"}
        Link
  .row
    .col-sm-3.sticky-top#sidebar
      This sidebar should stick to the top, both in expanded view and stacked view.
    .col-sm-9#main
      This main will continue scrolling until the bottom while the sidebar will stick to the top.
      This main will continue scrolling until the bottom while the sidebar will stick to the top.
      This main will continue scrolling until the bottom while the sidebar will stick to the top.
      This main will continue scrolling until the bottom while the sidebar will stick to the top.

CSS

html, body {
  margin: 0;
  height: 100%;
}

.container {
  height: 120%;
  box-shadow: 2px 2px 10px;

  .row {    
    > #sidebar {
      background:#ccc;
    }
    > #main {
      background: #eee;
    }
  }
}

score 4 · Accepted Answer · edited Apr 24 '19 at 13:02

4

The #sidebar is as tall as the content, so there is no space for the sidebar to fix... so add .align-self-start to your #sidebar

https://codepen.io/anon/pen/PQbLPR

See also: https://getbootstrap.com/docs/4.3/utilities/flex/

edited Apr 24 '19 at 13:02

Community

1
1

answered Feb 08 '18 at 06:30

caiovisk

3,667
1
12
18

thanks it worked! Does this mean that `sticky-top` will only stick until I get past the bottom border of the element that has that class? – reiallenramos Feb 08 '18 at 06:33
(^answering my own question) yes that seems to be the case because I tried to duplicated the entire `row` and the sidebar stuck only until I reached the second row. Thanks! – reiallenramos Feb 08 '18 at 06:37
Wow, thanks. Worked like charm! – Turbojohan Dec 11 '18 at 08:57

Bootstrap 4 sticky-top not working properly

1 Answers1