.sidebar-nav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; right: 0; background-color: $sidebar-background; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidebar-nav a { padding: 8px; text-decoration: none; color: $sidebar-text-color; font-size: 25px; display: block; transition: 0.3s; } .sidebar-table { padding: 0 26px; } .sidebar-tr { white-space: nowrap; padding: 8px 8px 8px 32px; text-decoration: none; color: $primary; font-size: 25px; transition: 0.3s; } .sidebar-icon { color: $sidebar-text-color; } .sidebar-td { padding: 7px 0; } @media screen and (max-height: 450px) { .sidebar-nav { padding-top: 15px; } .sidebar-nav a { font-size: 18px; } } #nav-btn { width: 60px; height: 35px; position: fixed; right: 25px; top: 25px; margin: 0; z-index: 2; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; } #nav-btn span { display: block; position: absolute; height: 5px; width: 100%; background-color: $primary; border-radius: 5px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; } #nav-btn span:nth-child(1) { top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #nav-btn span:nth-child(2) { top: 15px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #nav-btn span:nth-child(3) { top: 30px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #nav-btn.open span { background-color: $primary; } #nav-btn.open span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: -3px; left: 8px; } #nav-btn.open span:nth-child(2) { width: 0%; opacity: 0; } #nav-btn.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 39px; left: 8px; } @media (prefers-reduced-motion: reduce) { #nav-btn, #nav-btn span, .sidebar-nav { -webkit-transition: 0; -moz-transition: 0; -o-transition: 0; transition: 0; } }