A responsive scrolling menu sidebar that switches to a compact variant when the viewport height is too short to contain the default appearance.
Cohost - Sticky & Compact Sidebar Nav Menu by zlrc
Details
Authorzlrc
LicenseCC BY-SA 4.0
Categorycohost.org
Created
Updated
Size1.5 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Main Features:
- The sidebar sticks to the screen as you scroll.
- If the viewport is less than a certain height, the sidebar will switch to a compact version to fit.
- When opening the "bookmarked tags" menu, a scrollbar will appear if the list of tags exceeds the viewport.
This userstyle is an adaptation (with some adjustments) of a couple small CSS snippets written by @twilight-sparkle and @binarycat on cohost. Their contributions are credited in the source code.
Source code
/* ==UserStyle==
@name Cohost - Sticky & Compact Sidebar Nav Menu
@author ZiRC (https://github.com/zlrc)
@version 1.0.1
@namespace net.thebunny
@license CC-BY-SA-4.0
==/UserStyle== */
@-moz-document domain("cohost.org") {
@media (min-width: 1024px) {
/* Sticky sidebar */
ul[id^="headlessui-menu-items-"] {
position: sticky;
top: 5rem;
margin-bottom: 8rem;
/*
* Scrollbar for bookmarked tags, inspired by @binarycat:
* https://cohost.org/binarycat/post/1742015-this-is-cool-i-adde
*/
overflow-x: hidden;
overflow-y: scroll;
max-height: 80vh;
}
/* Compact sidebar by @twilight-sparkle: https://cohost.org/twilight-sparkle/post/1506148-smol-sidebar */
@media (max-height: 860px) {
ul[id^="headlessui-menu-items-"] li {
padding: 3px !important;
}
ul[id^="headlessui-menu-items-"] li:hover {
border-color: transparent !important;
background: rgba(255,136,0, 0.2) !important;
}
/* Round the corners of tags list items. */
ul[id^="headlessui-menu-items-"] > ul > li {
border-radius: 0.5rem;
min-width: 100%;
width: fit-content;
}
/* Make the <a> tag a block element so it spans the whole length of its parent. */
ul[id^="headlessui-menu-items-"] > ul > li a {
display: block;
}
}
}
}