0

I am trying to build a sidebar with centered vertical elements like this design:

enter image description here

I couldn't figure it out after 2 hours so I decided to ask you guys if somebody could help me since I can't find any good links that can provide helpful information.

I think I am doing something wrong in the following sidenav class:

.sidenav {
    overflow: auto;
    font-family: verdana;
    font-size: 12px;
    font-weight: 200;
    background-color: #16191C;
    position: fixed;
    top: 0px;
    width: 150px;
    height: 100%;
    color: #e1ffff;
}

Check JsFiddle.

Unheilig
  • 16,196
  • 193
  • 68
  • 98
Prototype
  • 9
  • 1
  • 10

1 Answers1

0

First the a href must be inside the li element..

use flexbox.

ul {
 position: fixed; 
 z-index: 1;
 top: auto;
 bottom: auto;
 left: 0;
 /*right: 0;*/
 margin: auto;
 height: 100%;
 width: 100%;
 padding: 50px;
 display:flex;
 flex-direction:row;
 flex-wrap:wrap;
 justify-content:center;
}

ul li {
  display:block;
  width:100%;
}

Try this updated fiddle

OK try this

with more elements

Frank Wisniewski
  • 1,182
  • 8
  • 7