[cgMultimediaParticipant]

Hello,

I’m in the process of building a site (currently at this address: http://savvi.ca/sswp/ ) and I’ve got problems with the navbar overlapping the page content.

When a given page loads, the content generally appears in the right place, but if the viewer scrolls down and then back up, the content won’t scroll all the way back down from under the navbar… and it appears there’s a corresponding blank spot at the bottom of the page.

When viewed on mobile (I’m testing with my iPhone 5), scrolling down then back up seems to cause the content fully appear, then jump “back under” the navbar.

Any idea how this might be resolved?

THANKS!
Carlos

[RupokMember]

Hello Carlos,

Thanks for writing in! Upon checking your given url it seems everything is working as expected and I can’t find such issues. Would you please check it again from another browser/PC and confirm the issue still persist. If you still find any issue, please clarify with some screenshots that reflects the issue. We’ll be happy to assist you.

Thanks

[cgMultimediaParticipant]

Hi, Thanks for the quick response! For an easy illustration of the issue (maybe I wasn’t as clear explaining as I could have been… late night!) Here’s a screen shot of what this page looks like when it first loads — note size of banner at the top, under the navbar:

And here’s what it looks like after scrolling down, then scrolling back up:

And this is what the bottom of the page looks like — there’s the default light grey background colour at the bottom (it’s not supposed to be there), which looks to be the same vertical size as the navbar:

I’ve checked it in Safari, Firefox, and Chrome on the Mac and in Firefox and Chrome on Windows 7 and it behaves exactly the same in all of them.

I’ll see if I can send some screen snaps from the iPhone as well.

[cgMultimediaParticipant]

The iPhone version is doing the same overlap thing as shown above, with some additional jumping I can’t really show you because I can’t video-capture my iPhone’s screen…

[cgMultimediaParticipant]

Actually, forget the part about the extra content at the bottom of the page… I just had an extra content-block there. But the stuff at the top of the page continues to baffle me. Thanks!

[LelyModerator]

Hello There,

Thanks for posting in and giving us screenshot:
Please add the following Javascript code via Appearance > Customize > Custom > Javascript:

jQuery(function($){ $('.x-nav-wrap.desktop .x-nav a').click(function(e){ e.preventDefault(); $('html,body').animate({ scrollTop: $('#'
+ $(this).attr('href').split("#").slice(-1)[0]
).offset().top - $('.x-navbar').height()
},700
,'swing');
});
});

If above code doesn’t work, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[cgMultimediaParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Sorry about that.

To fix it, please add this in Custom > CSS in the customizer.

body.x-navbar-fixed-top-active .x-navbar-wrap {
    min-height: 90px;
}

Hope that helps.

[cgMultimediaParticipant]

Hey! It worked!

I put it in my child theme’s style.css file, but either way it’s solved. Thanks so much!

[Prasant RaiModerator]

You are most welcome 🙂 .

[Author]

Posts