abdullahtarawneh.com/assets/scss/partials/site-header.scss

.site-header {
	z-index: 10;
	a {text-decoration: none; color: inherit;}
	.container {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		padding: 1em;
	}
	box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
}

.site-masthead {display: flex; align-items: center;}
.site-icon {width: 3em; height: 3em; border-radius: 100em; margin-right: 1em;}
.site-title {margin-bottom: 0; line-height: 1; font-size: 1em;}

body {
	margin-bottom: 64px;
	min-height: calc(100vh - 64px);
	@media (min-width: 960px) {
		margin-bottom: unset;
		min-height: 100vh;
	}
}

.site-nav {
	flex-grow: 1;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	background: white;
	color: #777;
	z-index: 2;
	ul {
		height: 64px;
		max-width: 960px;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
		li {
			flex: 1;
			border-bottom: 4px solid #ddd;
			&.active {
				color: black;
				border-bottom: 4px solid #0060ff;
				font-weight: 700;
			}
			a {
				display: flex;
				flex-flow: column;
				align-items: center;
				justify-content: center;
				height: 100%;
				span {padding: 0.25em;}
			}
		}
	}
	box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
	@media (min-width: 960px) {
		position: unset;
		bottom: unset;
		left: unset;
		width: unset;
		background: unset;
		margin-left: 6em;
		box-shadow: none;
		ul {
			li {
				border-bottom: 4px solid #ddd;
				color: #666;
				&.active {
					color: black;
					border-bottom: 4px solid #0060ff;
				}
			}
		}
	}
}

@media (min-width: 960px) {
	.site-header {
		position: sticky;
		top: 0;
		background: white;
	}
}