Time to take the table of contents styling up a notch! In this workshop, we’ll add responsive and sticky styling.

Workshop context

  • In the previous two workshops, you created a table of contents from the MDX blog headers, and displayed the table of contents next to the blog content.
  • In future workshops, you’ll add links from the table of contents headings that scroll to the corresponding heading in the post.

Workshop goal

By the end of this workshop:

  • When the viewport becomes narrower than 70rem, hide the table of contents.
  • When the user scrolls down to read more of the blog post, the top of the table of contents should never get closer than 1rem to the header – until the bottom of the table of contents is even with the bottom of the blog post content.


Hint 1 For the responsive showing / hiding: you may want to write the CSS using a “mobile first” approach :

Hint 2 Sticky positioning , sadly, can be very frustrating. Sometimes things just refuse to stick. Here is a likely reason you might encounter for the table of contents:

The container for the sticky element (the aside) is automatically sized to fit its contents (the table of contents). Without specifying a height for the aside, it isn’t long enough for the the table of contents to have room to stick before the container scrolls off the page. Try adding height: 100% to the CSS you’ve assigned to the aside in the BlogPost component. (See the workshop solution for more explanation of what’s going on here.)

Hint 3 To keep the table of contents from sliding underneath the header, set the top value to be 1rem plus the height of the header. You can find a css custom property for the height of the header in src/app/globals.css. You can add values in CSS using calc .