Search code examples
htmlcssmobilenavbarsticky

Position Relative Is Making Sticky Menu Not Work

Ok The Navbar Menu (White Bar) is working fine and is sticking to the top but when I click on the Menu the Sticky class is no longer working. I figured out what is causing the problem but Im not sure how to fix this. 

 /* This is Causing Sticky To Not Work After you Click On "Hamburger Menu" */
   .bottomnav.responsive {position: relative;}

I tried to remove the .bottomnav.responsive {position: relative;} but then the menu does not work correctly when I do that. Please let me know what is the best way to fix this without messing up the menu.

You can see the website Here http://lonestarwebandgraphics.com/

enter image description here

enter image description here

enter image description here

Solution

  • Can you use this code for sticky 

        function fixed_top_menu() {
        var windows = $(window);
        windows.on("scroll", function () {
            var header_height = $(".bottomnav").height();
            var scrollTop = windows.scrollTop();
            if (scrollTop > header_height) {
                $(".bottomnav").addClass("sticky");
            } else {
                $(".bottomnav").removeClass("sticky");
            }
        });
    }
    fixed_top_menu();

.bottomnav.sticky{
 background-color: #fff;
 position: fixed;
 top: 0;
 }