Meghan Logue Meghan Logue - 1 year ago 67
jQuery Question

Navigation - Fixed

I'm trying to create a site with a slightly complicated navigation. I've gotten the navigation to look like I want to on initial load, but now am trying to get it to sticky nav to the top on scroll. I've been able to get a class to be created when the navigation bar hits the top, but cannot get it to sticky. Every time I add a position it jumps back down. Any advice or help would be great.

Here is the site:

The div that needs fixed on scroll is moduletable_menu which also gets main-nav-scrolled added as a class when it gets to the top of the page.

Answer Source

Declaring the following styles will fix the navigation in question to the top of the menu when the class main-nav-scrolled is added.


.main-nav-scrolled .top-menu li {
    display: inline-block;
    float: none;

.main-nav-scrolled .top-menu {
    position: fixed;
    top: 0;
    bottom: auto;
    z-index: 9;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;