.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); border-radius: 0.3rem; 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: rgb(10, 14, 57); } .top-row { height: 3.5rem; background-color: rgba(0,0,0,0.4); } .navbar-brand { font-size: 1.1rem; } ::deep .icon { margin-left: 0.5rem; margin-right: 0.5rem; } ::deep .home-icon { --icon-mask-image: var(--icon-home-mask-image); } ::deep .weather-icon { --icon-mask-image: var(--icon-weather-mask-image); } ::deep .counter-icon { --icon-mask-image: var(--icon-counter-mask-image); } .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; } }