header{
display: flex; align-items: center; justify-content: flex-start; min-height: 50px; margin-bottom: 160px; h1{ padding: 20px; a{ color: white; font-family: 'Oleo Script', cursive; font-size: 2.5rem; } } #desktop-nav{ #desktop-menu{ list-style: none; margin: 0; margin-right: 180px; padding: 0; overflow: hidden; ul{ display:inline; } li{ float: left; margin-right: 10px; a{ display: block; text-decoration: none; color: white; font-weight: bold; font-size: 1.5rem; } a:hover{ text-decoration: underline; } } } } //start menu #hammenuToggle{ display: block; position: absolute; top: 15px; right: 15px; z-index: 1; -webkit-user-select: none; user-select: none; } #hammenuToggle a { text-decoration: none; color: #232323; transition: color 0.3s ease; } #hammenuToggle a:hover { color: $base-color; } #hammenuToggle input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */ -webkit-touch-callout: none; } /* * Just a quick hamburger */ #hammenuToggle span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: white; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; } #hammenuToggle span:first-child { transform-origin: 0% 0%; } #hammenuToggle span:nth-last-child(2) { transform-origin: 0% 100%; } /* * Transform all the slices of hamburger * into a crossmark. */ #hammenuToggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #232323; } /* * But let's hide the middle one. */ #hammenuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } /* * Ohyeah and the last one should go the other direction */ #hammenuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); } /* * Make this absolute positioned * at the top left of the screen */ #menu { position: fixed; width: 300px; margin: 10px 0 200px -135px; padding: 50px; // background: #ededed; background: white; border: 2px solid $base-color; opacity: 0.98; border-radius: 30px; list-style-type: none; -webkit-font-smoothing: antialiased; /* to stop flickering of text in safari */ transform-origin: 0% 0%; transform: translate(100%); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); } #menu li { padding: 10px 0; font-size: 22px; } /* * And let's slide it in from the left */ #hammenuToggle input:checked ~ ul { transform: none; }
}