Fixed Navbar broke unrolling menu

Question

I am helping on this website: www.noyoco.com. I recently added a script to fix the nav bar on top when user scrolls.

    <script type="text/javascript">
  $(document).ready(function() {
    var s = $("#main-nav");
    var pos = s.position();     
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});
</script>

But I can't figure out why unrolling menu is broken.

Working properly when on top (script is off), broken when script is on (if you have scroll)

Can someone help with that? Thanks!

Answer 1

It's because of the fact that the second menu is not in absolute position of the nav container. It's only in display: block; and display: none; when you toggle it with the main menu.

To fix that, you can add a relative position on the parent container like this :

.multi-level-nav {
  position: relative;
}

And an absolute position to the menu on the submenu :

.tier-2 { 
  position: absolute; 
  left: 0; 
  right: 0;
  z-index: 2; /* to be above the slideshow */
}

Hope that helps.

EDIT

It's also because of this selector, you have to change it because of the change of the structure when it becomes fixed :

.nav-row ul ul {
    display: none;
}