.navbar-toggler { appearance: none; cursor: pointer; width: 3.5rem; height: 2.5rem; color: white; position: absolute; top: 0.5rem; right: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1); } .navbar-toggler:checked { background-color: rgba(255, 255, 255, 0.5); } .top-row { min-height: 3.5rem; background-color: rgba(0,0,0,0.4); } .navbar-brand { font-size: 1.1rem; } .bi { display: inline-block; position: relative; width: 1.25rem; height: 1.25rem; margin-right: 0.75rem; top: -1px; background-size: cover; } .bi-house-door-fill-nav-menu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); } .bi-star-fill-nav-menu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-star-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73a.855.855 0 0 0-.242-.908l-3.86-3.756a.75.75 0 0 1 .416-1.228l4.753-.952a.855.855 0 0 0 .643-.643l2.125-4.617c.183-.398.652-.398.835 0l2.125 4.617c.121.265.373.462.643.643l4.753.952a.75.75 0 0 1 .416 1.228l-3.86 3.756a.855.855 0 0 0-.242.908l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/%3E%3C/svg%3E"); } .nav-item { font-size: 0.9rem; padding-bottom: 0.5rem; } .nav-item:first-of-type { padding-top: 1rem; } .nav-item:last-of-type { padding-bottom: 1rem; } .nav-item ::deep .nav-link { color: #d7d7d7; background: none; border: none; border-radius: 4px; height: 3rem; display: flex; align-items: center; line-height: 3rem; width: 100%; } .nav-item ::deep a.active { background-color: rgba(255,255,255,0.37); color: white; } .nav-item ::deep .nav-link:hover { background-color: rgba(255,255,255,0.1); color: white; } .nav-scrollable { display: none; } .navbar-toggler:checked ~ .nav-scrollable { display: block; } @media (min-width: 641px) { .navbar-toggler { display: none; } .nav-scrollable { /* Never collapse the sidebar for wide screens */ display: block; /* Allow sidebar to scroll for tall menus */ height: calc(100vh - 3.5rem); overflow-y: auto; } }