Table Of Contents

Table Of Contents

Customizing Notion Blocks

Table Of Contents

1. How to hide Table of Contents

This section describes how to hide the table of content in mobile view. Use the below code snippets to hide a table of contents block in a mobile screen. 
@media only screen and (max-width: 768px) {
  .notion-table-of-contents {
    display: none;
  }
}

2. How to make a Sticky Table Of Contents

For a two-column layout, if you wish to make the Table of Contents (ToC) block sticky (float alongside when you scroll), use the following code block. Paste this inside Code > CSS.
.bullet-2-column {
    overflow: unset;
}
.notion-table-of-contents {
    position: sticky;
    top: var(--navbar-height);
    overflow: auto;
    height: 100vh;
}
.notion-table-of-contents-item-body {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}