Wosley Alarico Wosley Alarico - 1 year ago 87
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) {
}else {

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?

Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download