After stumbling upon CSS3's display: flex; property, I decided to implement it in my website's sticky header. However, I encountered a problem.
The main objective was to evenly distribute all links across the entire width of the header, but achieving this became challenging when grouping elements semantically using, for instance, a <nav> tag.
Take a look at the example on jsfiddle: https://jsfiddle.net/9bua0n7o/
<header>
<div class="logo">
Logo
</div>
<nav class="navigation">
<a href="#">Home</a>
<a href="#">FAQ</a>
<a href="#">Contact</a>
</nav>
<div class="search">
<a href="#">Search</a>
</div>
<div class="login">
<a href="#">Register</a>
<a href="#">Login</a>
</div>
</header>
CSS:
header {
width: 100%;
height: 60px;
line-height: 60px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
padding: 0 25px;
box-sizing: border-box;
background: #ccc;
}