.wrapper { display: flex; width: 100%; } #sidebar { width: 250px; position: fixed; /** Needs sticky navbar to work. */ top: 55px; left: 0; height: 100vh; z-index: 999; background: rgb(255, 255, 255, 0.35); transition: all 0.3s; } #sidebar .sidebar-header { padding: 20px; /** TODO background: #6d7fcc; */ } #sidebar ul.components { padding: 20px 0; } #sidebar ul p { padding: 10px; } #sidebar ul li a { padding: 10px; font-size: 1.1em; display: block; } #sidebar ul li a:hover { /** TODO color: #7386D5; background: #fff; */ } #sidebar ul li.active > a, a[aria-expanded="true"] { /** TODO color: #fff; background: #6d7fcc; */ }