See what it looks like firstly. or find the demo here

Fixed Navigation

This way of navigation is to fixed the nav to the middle right of the body, then vertically middle the list of the nav items. This kind of navigation suites for formatted or icon-based item which won’t occupy too much space but well-marked the navigation.

Props and cons

The fixed right position is easily clickable and touchable, especially on mobile device. And the vertical aligned position break the traditional layout, which makes it more enjoyable.

But this is not very flexible for irregular nav list. And on mobile device, it might cover the content of the body.

Way to make it

The height of container and the display and position of the nav is essential.

Container height

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
nav {
    color: #3A444D;
    margin-right: 1%;
    display: table;
    position: fixed;
    right: 0;
    height: 100%;

nav ul {
    display: table-cell;
    vertical-align: middle;

The vertically middle aligned positioning for the list items used table and table-cell. I didn’t find better way to do so, it might have smarter ways to do so.


Go to repo if you want to know more styling details.