Foundation fixed top bar, how to deal with the ofset

Question

I am trying to use the 'fixed' class in foundation to keep my topbar fixed at the top when a user scrolls down. When using it the body of the page goes behind the top navigation bar. First 3 lines are not visible. I thought about simply pushing it down by creating a margin or some padding at the top. But that won't actually work as the heigh of the top nav bar is not static, it responds to the width of the window.

I have the code here: http://jsfiddle.net/ancv8bsw/1/

$(document).ready(function () {
    $(document).foundation();
    
})

<div class="contain-to-grid fixed">
    <nav class="top-bar" data-topbar data-options="is_hover: false">
        <ul class="title-area">
            <li class="name">
                <h1>
                    <a href="#"></a>
                </h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href><span>Menu</span></a></li>
        </ul>
        <section class="top-bar-section">
            <ul>
        <li>
            <a href="/ukih" target="_self">Home</a>
        </li>
        <li>
            <a href="/ukih/about" target="_self">About Us</a>
        </li>
        <li>
            <a href="/ukih/projects" target="_self">Projects</a>
        </li>
        <li>
            <a href="/ukih/investment" target="_self">Investments</a>
        </li>
        <li>
            <a href="/ukih/contact" target="_self">Contact Us</a>
        </li>
                <li>
            <a href="/ukih/contact" target="_self">Contact Us</a>
        </li>
                <li>
            <a href="/ukih/contact" target="_self">Contact Us</a>
        </li>
                <li>
            <a href="/ukih/contact" target="_self">Contact Us</a>
        </li>
            </ul>
        </section>
    </nav>
</div>
<div>test1</div><div>test2</div><div>test3</div>
<div>test4</div>
<div>test5</div><div>test6</div><div>test7</div><div>test8</div><div>test9</div><div>test10</div><div>test11</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div>

as you can see when narrowing the window the top bar height increases.

Is there a way i can solve this without creating a static margin at the top?

Cody Jenkins Cody Jenkins · Accepted Answer · 2015-03-27T18:44:38

Solved with JS:

$(document).ready(function () {
updateContentOffset();
$(window).resize(function(){
    updateContentOffset();
});
function updateContentOffset() {
    var offset = $('.contain-to-grid.fixed').height();
    $('.content').css('margin-top',offset);
}});

http://jsfiddle.net/ancv8bsw/3/

This script looks to find the height of the container div and update the margin on the content accordingly. You might update your markup classes to something not so generic for the nav container.

Foundation fixed top bar, how to deal with the ofset

1 Answers