When viewing on a smaller screen, one of the links in this navigation (nav-pills, nav-justified) spans two lines, causing the other links to appear larger as well. While this may seem beneficial, active or highlighted links only partially fill the box, resulting in an unsightly appearance as depicted in the image below. Clearly not ideal, right?
Check out the nav row image here
Is there a way to ensure that the active or highlighted link fills up the entire box? Additionally, how can I vertically center the link within the box?
Here's the relevant HTML code snippet:
<nav>
<ul class="nav nav-pills nav-justified">
<li><a href="#">Atmosphere</a></li>
<li class="active"><a href="#">Food</a></li>
<li><a href="#">Drink</a></li>
<li><a href="#">Access & Info</a></li>
<li><a href="#">Coupons</a></li>
<li><a href="#">Reservation</a></li>
</ul>
</nav>
And the accompanying CSS style rules:
header, section, footer, aside, nav, main, article, figure {display: block;}
nav > ul > li {
border: 4px #abcabc;
border-style: double;
}
nav > ul > li > a {
color: #c30200;
font-family: Garamond, sans-serif;
font-size: 18px;
}