Sticky Nav Bar Not Responsive On One Page

Marketing & Content Hub Blog, Website & Page Publishing
1

Hi friends! :grin:

I am running into some issues with the navigation bar on our homepage. It recently (and rather, randomly) stopped being “sticky”- so it would be fixed as you scroll. Here is the page: www.growthforce.com.

It is a global header, and it seems to be working on every page but our home page (example- www.growthforce.com/pricing)

Does anyone have any idea what may have happened? Or how we can fix this?

Any help would be very much appreciated! Thank you so much!

2

Hey @meghanmerriman

Welcome to the Community!

I’ll tag a few experts that will be able to share their thoughts

Hey @piersg @webdew @Anton what would you advise here?

Thanks

Sharon

3

Hi @meghanmerriman, the problem is in your main.js file. You have a variable that is returning undefined because it’s looking for a class ‘heroWrap’ that doesn’t exist here:

var heroH = $('.heroWrap').height();

$( document ).scroll(function() {
 if ($('body').hasClass('home')) {
 if ($(document).scrollTop() >= heroH) {
 $('.header-container-wrapper').addClass('fixed');
 }
 else {
 $('.header-container-wrapper').removeClass('fixed');
 };
 }
 // other if conditions
});

You need to either add heroWrap to your page so a height can be calculated, or change heroH in your if statement to a value, which is what’s happening on your pricing page:

if ($(document).scrollTop() >= 100) {
 $('.header-container-wrapper').addClass('fixed');
}
4

Thank you so much! This worked! :grin: