Wosley Alarico Wosley Alarico - 2 months ago 5
Javascript Question

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/

Answer

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;
}
Comments