Minimal-mistakes: How to make sticky header

Here's some hints to get you started:

.masthead {
-   position: relative;    
+   position: fixed;
+   top: 0;
    border-bottom: 1px solid #f2f3f3;
    -webkit-animation: intro 0.3s both;
    animation: intro 0.3s both;
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
    z-index: 20;
+   width: 100%;
+   background: white;  // set a color to hide content that may appear below masthead
+   height: 85px; // need a magic number here which may break in different viewports
}

This will get the menu in the masthead in the right place. But it will be overlapping the body content. To fix that you need to add some padding to the top that matches the height of the masthead (or larger) so it clear it.

body {
    margin: 0;
-   padding: 0;
+   padding: 85px 0 0;  // padding-top equal to masthead height or greater
    color: #494e52;
    font-family: -apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
    line-height: 1.5;
}

This should hopefully be pretty close to what you need. The author sidebar is "stuck" with a sticky polyfill script. It does some voodoo by cloning it, calculating its position, and then re-positioning things to fake position: sticky for browsers that don't support the property.

I'm thinking that once you square away the other CSS for the fixed masthead it will adjust the author sidebar accordingly. If not then you might need to play around with that script. https://github.com/wilddeer/stickyfill

On my personal site I have a fixed positioned masthead. The codebase isn't a 1:1 to this theme but it shares a lot of the same scripts and things. Could look there for some ideas to getting it work if the suggestions above don't pan out.

Thanks!

Actually checking your site helped a lot! I was missing the background and the sidebar padding.

Quick question, I didn't apply the padding to the body, but rather to the #main container. Is there a difference regarding the style?

Here is the final diff in case someone wants to use it. The lines may not be 100% similar to the original commit as I modified the base, but they shouldn't be difficult to find.

 .masthead {
-  position: relative;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: $masthead-height;
+
   border-bottom: 1px solid $border-color;
   -webkit-animation: intro 0.3s both;
           animation: intro 0.3s both;
@@ -16,6 +20,7 @@
     @include clearfix;
     padding: 0.1em 0.1em 0.1em;
     font-family: $sans-serif-narrow;
+    background-color: #fff;

     @include breakpoint($x-large) {
       max-width: $x-large;
diff --git a/_sass/_page.scss b/_sass/_page.scss
index e95f07d..487c5c7 100644
--- a/_sass/_page.scss
+++ b/_sass/_page.scss
@@ -6,6 +6,7 @@
   @include container;
   @include clearfix;
   margin-top: 2em;
+  padding-top: $masthead-height;
   padding-left: 1em;
   padding-right: 1em;
   animation: intro 0.3s both;
diff --git a/_sass/_sidebar.scss b/_sass/_sidebar.scss
index 9df17ea..712498a 100644
--- a/_sass/_sidebar.scss
+++ b/_sass/_sidebar.scss
@@ -8,6 +8,7 @@

 .sidebar {
   @include clearfix();
+  padding-top: $masthead-height;
   margin-bottom: 1em;

   @include breakpoint($large) {
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
index d14acf0..eec32ee 100644
--- a/_sass/_variables.scss
+++ b/_sass/_variables.scss
@@ -139,3 +139,5 @@ $box-shadow                 : 0 1px 1px rgba(0, 0, 0, 0.125);
 $navicon-width              : 28px;
 $navicon-height             : 4px;
 $global-transition          : all 0.2s ease-in-out;
+
+$masthead-height            : 50px;

Depends on the content and how things are structured. If all the main content is in main then adding the padding there should be fine. Try it out and see what happens. You'll likely need some trial and error to get it right. At least I usually do :wink: