Create floating/sticky sidebar in Quark blog

Support Themes & Styling
2

@bozzochet, I took a look at how Bootstrap implements a ‘sticky’ toc.

On a fresh install of Grav 1.7.9, I added the following snippet to ‘/user/themes/quark/css/custom.css’:

// Only apply sticky when columns are shown side-by-side
@media screen and (min-width: 841px) {
  #sidebar {
    position: sticky;
    top: 4rem;
    height: calc(100vh - 7rem);
    overflow-y: auto;
  }
}

remain

You will probably need to adjust the values for ‘height’ and ‘top’ to suit your own needs.

Note: Off course, this should be done in an inherited theme to prevent loss of changes when a new version of Quark arrives.

1 Like