I am in the process of creating a mobile navigation menu using Flexbox. It will be a vertical menu that occupies 100% of the available height, with the navigation items evenly spaced and taking up the entire height.
The structure I am using is ul>li>a.
https://i.sstatic.net/K6Le3.png
Currently facing an issue :
I am struggling to:
- Get the
<a>element to occupy 100% of its parentli's height - Vertically align the content inside the
aelement
I have managed to achieve one or the other, but can't seem to accomplish both at the same time :(
Here is a link to a jsFiddle showcasing my current progress: http://jsfiddle.net/hopxzcq3/
<nav>
<ul class="main-nav">
<li><a href="#">Cat 1</a></li>
<li><a href="#">Cat 2</a></li>
<li><a href="#">Cat 3</a></li>
<li><a href="#">Cat 4</a></li>
<li><a href="#">Cat 5</a></li>
</ul>
</nav>
.main-nav {
display:flex;
flex-direction:column;
justify-content:space-between;
height:100%;
}
.main-nav li {
display:flex;
flex-grow: 1;
}
.main-nav li a {
display:block;
width:100%; height:100%;
}