GitHub 6956★

Have you seen CSS Scan?

The fastest and easiest way to check, copy and edit CSS.

Learn more →

CSS Scan logo

Split navigation

HTML

<ul class="split-navigation">
<!-- Navigation item -->
<li class="split-navigation__item">
<a href="">...</a>
</li>

<!-- Navigation item that sticks to the right -->
<li class="split-navigation__item split-navigation__item--right">
<a href="">...</a>
</li>
</ul>

CSS

.split-navigation {
/* Content is centered horizontally */
align-items: center;
display: flex;

/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0 0 0.5rem 0;
}

.split-navigation__item {
margin-right: 0.25rem;

/* Demo */
width: 1.25rem;
}

.split-navigation__item--right {
/* Sticks to the right */
margin-left: auto;
margin-right: 0;
}
Demo
Follow me on and to get more useful contents.