Flexbox Menu Bar Layout
Customizing
Select layout
Preview
Layout mode
Code
Paste to your file(s)
CSS
.menu-bar {
background-color: #1988f7;
display: flex;
justify-content: flex-start;
box-sizing: border-box;
}
.item {
color: white;
background-color: transparent;
font-size: 18px;
display: inline-block;
box-sizing: border-box;
padding: 14px 20px;
}
.item.title {
font-weight: 600;
}
.item:hover {
background-color: rgba(0, 0, 0, 0.1);
}
HTML
<nav class="menu-bar">
<div class="group">
<a class="item title">Site Title</a>
</div>
<div class="group">
<a class="item">Link 1</a>
<a class="item">Link 2</a>
</div>
</nav>