kate_hudson kate_hudson - 27 days ago 13
CSS Question

Vertical menu with stacked text

I have created a fixed vertical menu with stacked text JSFiddle

Each of my sections will be 100% height. I wasn't sure if this is the correct way to do things, but I essentially used

span
elements and set them to be
display: block;


<a class="page-scroll" href="#header">
<span> H </span>
<span> O </span>
<span> M </span>
<span> E </span>
</a>


Now what I have kind of works, but seeing as I am dealing with 100% heights for each section, I am trying to place the menu vertically aligned within the middle of the container. I have tried using this property on the
ul
but it does not move the whole menu into the middle.

I was thinking about using a margin top of 50%, but if I add more items to the menu this may not work. Additionally, if I did add more items to the menu, is there a way of ensuring that the whole menu is displayed within the viewport, so not overlapping into another section? I have updated the JSFiddle to demonstrate what I mean. Because I have added another couple of menu items to the menu, test2 seems to disappear because it does not fit into the viewport. Is there a way I can avoid this?

Any advice appreciated.

Thanks

Answer

Use flexbox for it. You just have to add 100% height for your .navbar element and the following settings for .navbar-nav:

.navbar-nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
}

https://jsfiddle.net/n4p9hknu/2/

If there are more menu list items than fit on the page, flex: wrap will cause them to wrap into a second column: https://jsfiddle.net/rubgowpa/1/

Comments