Flexy navigation

flexy-navigation.markdown

Flexy navigation

A Pen by Todd Prouty on CodePen.

License.

index.html

<header class="masthead">
	<h1 class="site-title"><a href="#"><img class="site-logo" src="https://via.placeholder.com/134x40?text=LOGO" alt="Site Name"></a></h1>
	
	<!-- Mobile menu toggle -->
	<input class="menu-toggle" id="menu-toggle" type="checkbox">
	<label class="menu-toggle__button" for="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></label>

	<nav class="navigation">
		<div class="navigation__section--primary navigation__section">
			<ul>
				<li class="nav-item"><a class="nav-item__link" href="#">My Apps</a></li>
				<li class="nav-item"><a class="nav-item__link" href="#">My Data</a></li>
			</ul>
		</div>
		<div class="navigation__section--secondary navigation__section">
			<ul>
				<li class="nav-item"><a class="nav-item__link" href="#">About</a></li>
				<li class="nav-item"><a class="nav-item__link" href="#">Help</a></li>
				<li class="nav-item--account nav-item">
					<span class="dropdown-toggle">
						<img class="nav-avatar" src="https://www.fillmurray.com/38/38" alt="">
						<span class="dropdown-toggle__caret"></span>
					</span>
					<ul class="account-dropdown">
						<li class="account-dropdown__user">Logged in as: John Doe</li>
						<li><a class="nav-item__link" href="#">Change password</a></li>
						<li><a class="nav-item__link" href="#">Log out</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</nav>
</header>

style.scss

/* Link test */

// a {
// 	background: coral;
// }

/* SETUP */

*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
	height: 100vh;
}

html {
	box-sizing: border-box;
}

body {
	font-family: Avenir;
	font-size: 12px;
	background: transparent url('https://placebear.com/g/1280/1026') no-repeat center top fixed;
	background-size: cover;
}

a {
	color: #777;
	text-decoration: none;
	&:hover {
		color: #333;
		text-decoration: none;
	}
	
	> img {
		display: block;
	}
}

nav ul {
	list-style: none;
	padding: 0;
}

/* END SETUP */

.masthead {
	display: flex;
	padding: 0 15px;
	background: white;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	@media (min-width: 768px) {
		justify-content: flex-start;
		flex-wrap: nowrap;
	}
}

.site-title {
	margin: 0 15px 0 0;
	padding: 5px 0;
	> a {
		display: block;
	}
}

.navigation {
	display: none;
	width: 100%;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	
	#menu-toggle:checked ~ & {
		display: flex; // Shows mobile nav menu
	}
	
	@media (min-width: 768px) {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
	}
}

.navigation__section {
	@media (min-width: 768px) {
		display: flex;
		align-items: stretch;
	}
	
	> ul {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin: 0;
		@media (min-width: 768px) {
			flex-direction: row;
			align-items: stretch;
		}
	}
	
	&--primary {
		padding-top: 10px;
		@media (min-width: 768px) {
			padding: 0;
			> ul {
				justify-content: flex-start;
			}			
		}
	}

	&--secondary {
		padding-bottom: 10px;
		@media (min-width: 768px) {
			padding: 0;
			> ul {		
				justify-content: flex-end;
			}		
		}
	}
}

.nav-item {
	display: flex;
}

.nav-item__link,
.account-dropdown__user {
	display: flex;
	padding: 10px;
	font-size: 16px;
	@media (min-width: 768px) {
		padding: 0 15px;
		font-size: inherit;
		align-items: center;
	}
}

.nav-item--account {
	@media (min-width: 768px) {
		position: relative;
		padding: 6px 6px;
		margin-right: -5px; // Looks better a little to the right
	}
}

.dropdown-toggle {
	display: none;
	@media (min-width: 768px) {
		display: block;
	}
	&__caret {
		color: #999;
		display: inline-block;
		width: 0;
		height: 0;
		margin-left: 2px;
		vertical-align: middle;
		border-top: 4px dashed;
		border-top: 4px solid \9;
		border-right: 4px solid transparent;
		border-left: 4px solid transparent;
		.nav-item--account:hover & {
			color: #222;
		}
	}
}

.account-dropdown {
	display: flex;
	justify-content: center;
    align-items: center;
    flex-direction: column;
	border-top: 1px solid #ccc;
	@media (min-width: 768px) {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		padding: 2px 0 5px;
		background: white;
		border: 0;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.175);
	}	

	.nav-item--account:hover & {
		@media (min-width: 768px) {
			display: block;
		}
	}
	
	@media (min-width: 768px) {
		> li {
			white-space: nowrap;
			padding: 0.3em 15px;
			> a {
				display: block;
				padding: 0.3em 15px;
				margin: -0.3em -15px;
				&:hover {
					background: #eee;
				}
			}
		}
	}
	
	&__user {
		font-style: italic;
		@media (min-width: 768px) {
			font-style: normal;
			font-weight: bold;
		}		
	}
}

.nav-avatar {
	display: inline-block;
	padding: 1px;
    border: 1px solid #ccc;
	width: 38px;
	height: 38px;
}

.menu-toggle {
	display: none;
	&__button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 38px;
		height: 38px;
		margin: 0;
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
		border-radius: 6px;
		font-size: 22px;
		color: #888;
		@media (min-width: 768px) {
			display: none;
		}
	}
}

/* Add to site.scss */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />