quitsocialmedia.club/styles/parts/_nav.scss

$tiny: .2rem;
$small: .5rem;
$regular-less: .9rem;
$regular: 1.1rem;
$regular-more: 1.3rem;
$regular-more-em: 1.3em;
$big: 1.6rem;
$bigger: 1.8rem;
$twice: 2.2rem;
$height: 3.1rem;
$mastodon: 4rem;
$radius-s: .4rem;
$radius-m: .6rem;
$radius-l: 1rem;
$trans: .5s ease-out;
$quicktrans: .1s ease-in-out;

header {
	height: $mastodon;
	text-transform: uppercase;
	* {
		border-radius: $radius-m;
		list-style-type: none !important;
		font-weight: 700 !important;
		z-index: 9;
	}
}

#home {
	position: fixed;
	top: 1.5vw;
	left: 5vw;
	a {
		display: inline-block;
		padding: 0 $regular-less;
		line-height: $height; 
		font-size: 1.8rem;
		color: var(--background);
		background: var(--primary);
		box-shadow: var(--shadow);
		margin: auto;
		&:hover,
		&:focus {
			box-shadow: none !important;
		}
		&:active {
			box-shadow: var(--inner-shadow);
		}
	}
}

#nav {
	position: fixed;
	top: 1.5vw;
	right: 6vw;
	text-align: right;
	padding: 0 .8rem;
	box-shadow: var(--shadow);
	background: var(--background);
	* {
		margin: 0 !important;
	}
	ul,
	menu {
		padding: 0;
		li {
			float: left;
			a,
			label {
				display: block;
				color: var(--text) !important;
				line-height: $height;
				height: $height;
				padding: 0 .8rem;
				font-size: $regular-more;
				font-weight: 700;
				&::after {
					content: none;
				}
				&:hover,
				&:focus{
					transform: scale(1.1) rotate(3deg);
					filter: none;
					border-bottom: none;
				}
				&:active {
					opacity: .6;
				}
				&::before {
					content: none !important;
				}
			}
		}
	}
}

.lang-list {
	top: 3.7rem;
	display: none;
	position: absolute;
	background: var(--background);
	#langtoggle:checked + & {
		box-shadow: var(--shadow);
		display: block;
	}
}

.nav-mobile {
	display: none;
	height: $height;
	width: $height;
	position: fixed;
	bottom: calc(3vh + .5rem);
	right: calc(6vw + 3.5rem);
	box-shadow: var(--button-shadow);
	background: var(--background);
	z-index: 6;
	span {
		top: 1.4rem;
		left: .7rem;
	}
	span,
	span::before,
	span::after {
		height: 4px;
		width: 1.7rem;
		background: var(--text);
		position: absolute;
		display: block;
		content: '';
		box-shadow: var(--little-shadow);
		border-radius: $radius-s !important;
 		transition: $quicktrans;
	}
	span::before {
		top: .65rem;
	}
	span::after {
		bottom: .65rem;
	}
}

.dropdown {
	height: $height;
}

@media only screen and (max-width: 950px) {
	#home {
		right: 0;
		left: 0;
		top: 2vh;
		text-align: center;
	}
	.nav {
		margin: 3vh;
	}
	.nav-mobile {
		display: block;
	}
	#nav menu {
		position: fixed;
		width: 11rem;
		bottom: calc(3vh + 4.5rem);
		right: -14rem;
		background: var(--background);
		box-shadow: var(--shadow);
		z-index: 9;
		overflow: hidden;
		li {
			clear: both;
			a {
				line-height: 2.5rem;
				height: 2.5rem;
			}
		}
	}
}

#menutoggle:checked {
	& ~ menu {
		right: calc(4vw + .3rem);
	}
	& ~ .nav-mobile {
		box-shadow: var(--inner-little-shadow);
		span {
			background: transparent;
			box-shadow: none;
			&::before,
			&::after {
				top: 0;
				box-shadow: none;
			}
			&::before {
				transform: rotate(45deg);
			}
			&::after {
				transform: rotate(-45deg);
			}
		}
	}
}