See what it looks like firstly. or find the demo here
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.
Nav displaying and positioning
The vertically middle aligned positioning for the list items used
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.