I'm currently using the top bar component from Zurb Foundation and have added a 1px border at the top and a 3px border at the bottom of the nav tag. However, I am facing height issues because the ul menu inside is set to 100% height.
What would be the best way to reduce the height by 4px?
I prefer not to use CSS calc() for compatibility concerns, but I only need compatibility with IE8+. I came across a suggestion in this question that mentioned using display: table, which I attempted but was unsuccessful.
CSS code added to the default nav:
nav {
border-top: 1px solid #fff;
border-bottom: 3px solid #fff;
@include box-shadow(0 0 5px 0 hsla(0, 0%, 0%, 0.2));
}
CSS excerpt for UL Height:
.top-bar-section ul {
width: auto;
height: auto !important;
display: inline;
}
HTML section snippet inside the nav tag:
<section class="top-bar-section">
<ul class="left"></ul>
<ul class="right">
<li><a href="#">ABOUT</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CASE STUDIES</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</section>