CODEWITHSUNDEEP
htmlcss
javajoe316
javajoe316

Reputation: 149

fixed navbar overlaps content

I have a navbar that is fixed but also at certain times hidden. Here is the fiddle http://jsfiddle.net/edsm3g8o/ and the couple_text gets overlapped by the nav_header. I tried adding padding-top to the couple_text but when the nav_bar is hidden it looks like a lot of whitespace on top.

<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>

Upvotes: 0

Views: 157

Answers (1)

Noah Wetjen
Noah Wetjen

Reputation: 1785

I'm sure there is another (better?) solution but if you are triggering the appearance/disappearance of the navbar with Javascript, maybe you can modify it to also toggle the padding, so it doesn't show up when the navbar is hidden and it's not needed.

Upvotes: 1

Related Questions