How can I make the sidebar stick to the top across different screen sizes? It works fine for smaller screens up until the 'sm' breakpoint, but beyond that, it doesn't stick. I've tried adjusting the order of class names, but it didn't solve the issue.
Why does 'sticky-top' work with 'col-sm-*' but not with 'col-*' in my code?
I've shared my code in HAML and SCSS format. You can find it here.
.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;
}
}
}