Sticky Navigation / Sidebar

May 18, 2023

Creating sticky navigation or a sidebar? Here's a quick html and css only approach.

html

<div id="wrapper">
	<div class="aside">
		<ul>
			<li>Home</li>
			<li>About</li>
			<li>Blog</li>
		</ul>
	</div>
	<div class="main">
		<!-- your content goes here -->
	</div>
</div>

css

#wrapper {
  display: flex;
  align-items: start;
}

.aside {
  padding: 20px;
  background: tomato;
  position: sticky;
  top: 0;
  height: 100dvh; /* only if you need the sidebar full height */
}

.main {
  padding: 20px;
}

👌This is good when you want a sticky table of content on your post