添加border-bottom到nav和vertical align菜单项

Question

我有一个导航工作正常，当我没有在导航链接上使用任何自定义底部边框，但尝试添加它们仍然具有以前的功能我的头。我只是想垂直对齐高度为50px的导航项和菜单链接上的自定义边框，但在移动视图中保持功能，移动视图中的边框将替换为正常的下划线声明。

这是我在添加自定义底部边框之前的工作原理：

--> Fiddle before

这是在移动尺寸中添加自定义底部边框时会发生的情况，菜单项不会垂直对齐，背景也不会跟随它们：

--> Fiddle after

<header>
<nav>
    <div class="mobile-nav">
        <div class="nav-toggle"><i class="nav-icon"></i></div>
    </div>
    <ul class="left-nav">   
        <li class="home"><a href="#">Pixelation</a></li>    
    </ul>
    <ul class="right-nav">  
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
</header>