CODEWITHSUNDEEP
javascriptjquerywordpress
Sidney Sousa
Sidney Sousa

Reputation: 3594

Navbar fixed top with jQuery canceling css properties

I am creating a WordPress site and managed to put my navbar fixed to the top when I scroll down the page using this code:

(function( $ ){   
    var navOffset = jQuery("nav").offset().top; 
    jQuery(window).scroll(function() {
       var scrollPos = jQuery(window).scrollTop();
        if(scrollPos >= navOffset) {
            jQuery("nav").addClass("fixed");
        }else {        
            jQuery("nav").removeClass("fixed");
        }     
   });     
})(jQuery);

But now when I click on the icons that I have on the page (on the Products and Services sections), neither the popups nor the the animation applied on the icons work.

When I deactivate this particular jQuery code, the popups work fine.

Is there another way that I can make the navbar fixed to top and still have my icons working fine?

Is there anything wrong on the jQuery? http://scentology.burnnotice.co.za/

Upvotes: 1

Views: 39

Answers (1)

Jacob Goh
Jacob Goh

Reputation: 20845

it appears that your nav is covering the whole screen when it's fixed

screenshot: enter image description here

it happens because you have a bottom: 0 css properties on the nav

nav#site-navigation {
    position: absolute;
    right: 0;
    bottom: 0;
}

the solution is to make sure that bottom: 0 is disabled when it's in fix mode. You can add bottom: auto !important; to your .fixed class

.fixed {
    top: 4%;
    width: 100%;
    text-align: center;
    bottom: auto !important;
}

Upvotes: 2

Related Questions