As a seasoned front-end developer, I recently encountered an issue that has stumped me. My main navigation bar has extensive right padding to ensure the hover dropdowns have ample space.
The problem seems to be in this piece of code:
HTML:
<div id="header">
<div class="main-wrap">
<div class="logo">
<a href="/"><img src="" alt="" /></a>
</div><!--end logo-->
<div class="mobile-logo">
<a href="/"><img src="" alt="" /></a>
</div>
<ul class="main-nav" aria-hidden="false" role="menubar">
<li><a href="">Future Students</a><img class="nav-arrow" alt="" src="" /></a></li>
<li><a href="">Future Students</a><img class="nav-arrow" alt="" src="" /></a></li>
<li><a href="">Future Students</a><img class="nav-arrow" alt="" src="" /></a></li>
<li><a href="">Future Students</a><img class="nav-arrow" alt="" src="" /></a></li>
</ul><!--end main-nav-->
</div><!--end main-wrap-->
</div><!--end header-->
CSS:
#header .main-wrap .main-nav li {
display: inline-block;
width: 146px;
text-align: left;
padding: 7px 15px 0px 22px;
position: relative;
border-left: 1px solid #782f40;
height: 100%;
cursor: pointer;
}
#header .main-wrap .main-nav li a {
font-family: 'open-sans';
font-style: normal;
font-weight: 600;
color: #5e5e5e;
text-transform: uppercase;
font-size: 18px;
line-height: 25px;
padding-bottom: 33px;
padding-right: 40px;
}
Despite being a simple setup, I can't seem to pinpoint the cause of this issue. While Chrome and IE display everything perfectly, Firefox is presenting a challenge. The links are breaking onto three lines and the anchor text does not fill the width of the list item. Any quick solutions?