Docs

[Jade]

Hi Bobby,

Please add this in the custom JS:

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
        navbar = $('.x-navbar');

    if (scrollPos > 100) {
      navbar.addClass('x-navbar-fixed-top');
    } else {
      navbar.removeClass('x-navbar-fixed-top');
    }
  });
});

Then add this CSS:

.x-navbar-fixed-top {
    background-color: rgba(255, 255, 255, 0.5);
}

Hope this helps.

[uberphoto]

Thanks for that — unfortunately, it is not what I’m looking for.

What I need is for the first section to be overlapped by the transparent navbar, and to become opaque on scroll.

I appreciate the help, though!

[Lely]

Hi There,

Please add the following CSS instead:

.home div#x-section-1 {
    margin-top: -68px !important; /* To move the first section on homepage behind the navbar*/
}
.home .x-navbar-fixed-top {
    box-shadow: none !important;
    background-color: transparent !important; /* To make it transparent by default on homepage*/
}
.home .home-navbar-onscroll {
    background-color: hsl(0,0%,100%) !important; /* To add background upon scroll*/
}

Then update the jquery to this:

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
        navbar = $('.x-navbar');

    if (scrollPos > 100) {
      navbar.addClass('home-navbar-onscroll');
    } else {
      navbar.removeClass('home-navbar-onscroll');
    }
  });
});

Hope this helps.

[uberphoto]

Thanks for that, Lely!

The code worked on Chrome (though I had to add .home .x-navbar {background-color:transparent;} to make it start as transparent on load — otherwise, it starts solid, then goes transparent when you start to move, then, after 68px, becomes solid again).

Unfortunately, on Firefox and Edge/IE, we are back to my original issue. It seems that, when you move section 1 into a top negative margin, it breaks something in the structure that forces the entire section off-canvas to the right of the nave (and makes it the size of the nav).

[Rad]

Hi there,

The problem with negative margin positioning is that not all relative elements will follow. It will only effective on the current element.

Please remove this,

.home div#x-section-1 {
    margin-top: -68px !important;
}

instead, add this one,

.home .masthead {
    height: 0px;
    z-index: 9999;
}

Then add this code to custom javascript to re-trigger rendering on IE.

jQuery ( function($) {

function re_render_IE() {
setTimeout ( function(){ $(window).trigger('scroll'); }, 100 );
}

re_render_IE();
$(document).ready(re_render_IE);
$(window).load(re_render_IE);

} );

I went ahead and did all these 🙂

Cheers!

[uberphoto]

You, Rad, are a rock god.

The changes you made disappeared, somehow, but I added them back and it worked great!

[Christopher]

Glad we could help you with this.

[Author]

Posts