How to create a sticky header with CSS-grid?

Question

I would like to make my header sticky when scrolling using CSS grid.

I have tried the solution proposed here: Sticky header on css grid Meaning:

position: sticky; 
top:0;

However it does not work...

.wrapper {
  display: grid;
  grid-template-areas: "header" "middle" "footer";
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}


/* Header */

header {
  order: 1;
  grid-area: header;
  display: grid;
  grid-gap: 100px;
  grid-template-areas: "logo nav";
  grid-template-columns: auto 1fr;
  grid-auto-flow: column;
  position: sticky;
  top: 0;
}

nav {
  display: grid;
  grid-area: nav;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}


/* Middle */

.middle {
  order: 2;
  grid-area: middle;
  display: grid;
  grid-template-columns: 50px 1fr 50px;
}

.middle>* {
  grid-column: 2 / -2;
}


/* Footer */

footer {
  order: 3;
  grid-area: footer;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.footer-links {
  display: grid;
  grid-column: 2 /-2;
  grid-template-columns: 1fr;
  grid-auto-flow: column;
  align-items: center;
}

<body>
  <div class="wrapper">

    <!-- Header -->
    <header>
      <a href="./index.html" title="Welcome" class="logo"><img src="img/logo_jaeaess_glitch.png" alt="Logo of the VJ Jääß (Jess de Jesus)" style="width:42px;height:42px"></a>
      <nav>
        <a href="./index.html" title="Welcome" class="welcome active">Welcome</a>
        <a href="./about.html" title="About" class="about">About</a>
        <a href="./artwork.html" title="Art Work" class="artwork">Art Work</a>
        <a href="./events.html" title="Events" class="events">Events</a>
      </nav>
    </header>
    <!-- Middle -->
    <section class="middle">
    </section>

    <footer>
      <div class="footer-links">
        <a href="https://www.instagram.com/jaeaess/" target="_blank">Instagram</a>
        <p>&copy; 2019 Jääß</p>
      </div>
    </footer>
  </div>

</body>

Everything displays as I want it to, except that the header scroll down instead of staying fix...

(For those who wonder, I put the order just to move it within a media query at a later stage of development)

Thank you for your answers!

I don't think `position:sticky` means what you think it means. It's **supposed** to scroll down but when it reaches the top it stops. Is that what is happening? — Paulie_D, Aug 02 '19 at 14:51
You should not use `position: sticky` yet. It has bad browser support. https://caniuse.com/#feat=css-sticky — Armin Bu, Aug 02 '19 at 14:57
@Paulie_D It is at the top, but as soon as I scroll down it goes up and disappear from the visible part on the browser... — Jääß Jääß, Aug 02 '19 at 15:34
@Reijo Yeah actually I would prefer the size remains "auto" for more flexibility if I happen to change the logo, or on mobile... — Jääß Jääß, Aug 02 '19 at 15:34
Just setting it to `auto` is not very responsive. You should use media queries for mobile support. You can size the logo with media queries too, just saying because I can't think of a no-javascript solution with auto height. Media queries should give you all the flexibility you need I think. — Armin Bu, Aug 02 '19 at 22:19

Armin Bu · Accepted Answer · 2019-08-02T22:57:09.770

To make the header fixed when scrolling, you could make it position: fixed. This requires you to set a fixed height for your header. This will make the header element flow on top of the content and ignore scrolling relative to the window.

  
.wrapper {
  /* the header will not take any vertical place so shift wrapper down a bit*/
  margin-top: 3rem; 
  display: grid;
  /*I removed the header area as we don't need it anymore and would not work with fixed position anways*/
  grid-template-areas: "middle" "footer";
  grid-template-rows: 1fr auto;
   /*I set the wrapper height to `200vw` so its easier to see the header not scrolling. Also take maring top into account*/
  height: calc(200vh - 3rem);
}


/* Header */

header {
  display: grid;
  grid-gap: 100px;
  grid-template-areas: "logo nav";
  grid-template-columns: auto 1fr;
  grid-auto-flow: column;
  position: fixed;
  top: 0;
  height: 3rem;
  width: 100%;
}

nav {
  display: grid;
  grid-area: nav;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}


/* Middle */

.middle {
  order: 2;
  grid-area: middle;
  display: grid;
  grid-template-columns: 50px 1fr 50px;
}

.middle>* {
  grid-column: 2 / -2;
}


/* Footer */

footer {
  order: 3;
  grid-area: footer;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.footer-links {
  display: grid;
  grid-column: 2 /-2;
  grid-template-columns: 1fr;
  grid-auto-flow: column;
  align-items: center;
}

<div class="wrapper">
  <!-- Header -->
  <header>
    <a href="./index.html" title="Welcome" class="logo"><img src="img/logo_jaeaess_glitch.png" alt="Logo of the VJ Jääß (Jess de Jesus)" style="width:42px;height:42px" /></a>
    <nav>
      <a href="./index.html" title="Welcome" class="welcome active">Welcome</a
          >
          <a href="./about.html" title="About" class="about">About</a>
      <a href="./artwork.html" title="Art Work" class="artwork">Art Work</a>
      <a href="./events.html" title="Events" class="events">Events</a>
    </nav>
  </header>
  <!-- Middle -->
  <section class="middle"></section>

  <footer>
    <div class="footer-links">
      <a href="https://www.instagram.com/jaeaess/" target="_blank">Instagram</a
          >
          <p>&copy; 2019 Jääß</p>
        </div>
      </footer>
    </div>

Ps.: You are kinda overusing the css grid at this moment. It is designed for 2 dimensional layouts. Your layout would be much(!) easier if you were using flexbox. Also making grid work in IE 11 is a pain.

Thanks @Reijo it works, the header is now stuck on top! However I am running into another issue now... The nav part of my header goes "under" the bottom of my logo... I can either remove the padding of my logo, but then my logo becomes very small, either add a: ` header { overflow: hidden; } ` But then it's ugly, as the menu items look not centered anymore but a bit too low... — Jääß Jääß, Aug 03 '19 at 13:58
No sorry, my bad, it works it's just that my background colour was on header, which for some mysterious reasons didn't work, but placing the background colour on a div that I have added to wrap the logo made it same size than the nav :) Many thanks @Reijo! — Jääß Jääß, Aug 03 '19 at 14:03
actually I have another issue running now, the content of my other page is "eaten" a bit by the header... Why does my wrapper grid does not start under the header? I have even removed the header element from the div wrapper but still it covers it — Jääß Jääß, Aug 03 '19 at 14:13
Header and Nav grid have the good size, but div wrapper and section middle "eat" a bit the bottom of the header.... jaeaess.com — Jääß Jääß, Aug 03 '19 at 14:21
This gets a bit off-topic now. You should start a new Question for that. — Armin Bu, Aug 04 '19 at 11:28
"Why does my wrapper grid does not start under the header?" It does, thats what the `margin-top` is for. — Armin Bu, Aug 04 '19 at 11:34
Just to be clear. The `position: fixed` doesn't necessarily require a fixed height. In this case, it's just necessary to position the content below the header with the `margin-top`. You could set the height to `height: auto` and sync the `margin-top`s value with javascript. — Armin Bu, Aug 04 '19 at 11:39
Ah okay, many thanks for this explanation @Reijo . I will let it as it is for now then, and will add a JS solution later. For now it is just when I collapse the browser under a certain limit that the content kind of "disappear" under the header, so it can wait. Many thanks once again! — Jääß Jääß, Aug 04 '19 at 14:23

How to create a sticky header with CSS-grid?

1 Answers1