Post by Elli on Aug 16, 2019 12:59:21 GMT -7
Asymmetrical Flexbox Navigation
Preview
Creates a navigation menu centered around a logo. Uses the Flexbox Mixins.
HTML
CSS
HTML
<nav class="navigation">
<div class="navigation__col navigation__col--left">
<a href="#">Home</a>
<a href="#">Notifications</a>
<a href="#">Messages</a>
</div>
<div class="navigation__col navigation__col--logo">
<a href="#">Logo</a>
</div>
<div class="navigation__col navigation__col--right">
<a href="#">Profile</a>
<a href="#">Logout</a>
</div>
</nav>
CSS
/* ======================================================
* Navigation Menu
* ====================================================== */
.navigation {
.flex-display();
background-color: #fff;
border-bottom: 1px solid #ccc;
}
.navigation__col {
.flex-display();
.flex-grow(1);
.flex-shrink(1);
.flex-basis(0);
.justify-content(center);
min-width: calc(50% - 200px); /* 50% minus flex-basis of logo column */
text-align: center;
}
.navigation__col > a {
color: #3498db;
font: 16px Verdana, Arial, sans-serif;
line-height: 40px;
padding: 8px 12px;
text-decoration: none;
}
.navigation__col > a:hover,
.navigation__col > a:focus {
color: #2980b9;
}
.navigation__col--left {
.justify-content(flex-end);
}
.navigation__col--right {
.justify-content(flex-start);
}
.navigation__col--logo {
.flex-grow(0);
.flex-basis(200px);
min-width: 0;
}
.navigation__col--logo > a {
.flex-basis(100%);
color: #9b59b6;
font: 28px Verdana, Arial, sans-serif;
}
.navigation__col--logo > a:hover,
.navigation__col--logo > a:focus {
color: #8e44ad;
}