Navigation bar is not responsive after scrolling

I am new to web development.I met a problem when designing a scrolling navigation bar.

I used a bootstrap grid and jquery for this. If I don't scroll down and just resize the window, then everything is fine. The navigation bar is resized and in the center of the window. But after I scroll down, the size of navigation bar will be fixed. Its size won't change when I make window larger(it will be smaller if I make window smaller, but not centered). This may caused by setting width: nav.width() in js file, but I don't know how to fix it.

This is a new account so I don't have enough reputation to upload images. I will try to describe it using words. For example, at beginning, the parent of navigation bar is 1140px, the width of navigation bar is 100%, so its size is 1140px. If I resize the window, let us say the width of its parent is 720px, then the navigation bar width is also 720px. Then if I scroll down, the callback function in js will run, it will set the width to 720px, which is a fixed value, thus it won't be responsible any more. Now, if I resize window to make its parent back to 1140px, the width of navigation bar is 720px rather than 1140. So how to fix this?

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <header id="home" style="height:300px">
                    <nav id="nav-wrap">
                        <ul id="nav" class="nav">
                            <li class="current">
                                <a href="">Home</a>
                            </li>
                            <li class="smotthscroll">
                                <a href=""> About </a>
                            </li>
                            <li class="smotthscroll">
                                <a href=""> Portfolio </a>
                            </li>
                            <li class="smotthscroll">
                                <a href=""> Skills </a>
                            </li>
                            <li class="smotthscroll">
                                <a href=""> Contact </a>
                            </li>
                        </ul>
                    </nav>
                </header>
            </div>
        </div>
      </div>

CSS

 #nav-wrap {
    font: 22px 'opensans-bold', sans-serif;
    width: 100%;
    margin: 0 auto;
    left: 0;
    top: 0;

}


    ul#nav {
    text-align: center;
    padding: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

    ul#nav li {
    height: 48px;
    display: inline-block;
}

    ul#nav li a {
    color:white;
    padding: 8px 13px;
    display: inline-block;
    text-align: center;
}


    $(function() {
    var nav = $('#nav');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var navWrap = $('#nav-wrap');
    var $w = $(window);
    $w.scroll(function () {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if(shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                width: nav.width()
            });
            isFixed = true;
        }else if (!shouldBeFixed && isFixed) {
            nav.css({
                position: 'static'
            });
            isFixed = false;
        }
    });
});