固定的导航栏重叠内容

Question

我有一个固定的导航栏，但在某些时候也是隐藏的。这是小提琴http://jsfiddle.net/edsm3g8o/，couple_text与nav_header重叠。我尝试在couple_text中添加padding-top，但是当nav_bar被隐藏时，它看起来像是顶部的很多空白。

<ul class="nav_header">
    <li class="three liMoreShopping" style="display: table-cell;">
        <a class="btnMoreShopping ui-link"><span>More Shopping</span></a>
    </li>
    <li class="three liCheckout" style="display: table-cell;">
         <a class="btnCheckout ui-link"><span>Checkout</span></a>
    </li>
    <li class="three liCart" style="display: table-cell;">
         <a class="btnCart ui-link"><span>Cart (1)</span></a>
    </li>
</ul>
<div class="couple_text">
    <h3>Jane Doe, John Doe</h3>
</div>

Answer 1

我确定还有另一个（更好？）解决方案，但如果您使用Javascript触发导航栏的出现/消失，也许您可​​以修改它以切换填充，因此，当导航栏被隐藏且不需要时，它不会显示出来。