I have been experimenting with creating a dynamic navbar that remains at the top of a webpage. Here's what I have so far:
<style>
.sticky-nav-wrapper > div
{
color: #000000;
display: inline-block;
display: -moz-inline-box;
*display: inline;
zoom: 1;
width: 33%;
text-align: center;
z-index: 50;
background: rgba(255, 255, 255, 0.8);
}
</style>
<div class="sticky-nav-wrapper">
<div>TEST</div><div>TEST2</div><div>TEST3</div>
</div>
This setup will produce a block like the one shown above.
However, when I attempt to set the position of sticky-nav-wrapper to fixed, the elements get crowded on one side:
So, my question is how can I maintain even spacing while keeping the navbar fixed at the top?