Sticky navigation doesn't appear when linking to anchor lower down the page

Support
#1

Hello,

I’m building a site that has a large nav bar, as well as a smaller sticky nav bar that appears after scrolling from the top (and a mobile version as well).

I’ve got a few places on the site that are supposed to link to anchors further down the Contact page, but when that page appears, the sticky nav isn’t there with it. It only appears when scrolling down a bit further. Can you help me so that when the user follows such a link, that when they arrive at the new page, the sticky nav is visible (and that it doesn’t overlap the anchor area)?

Here’s the staging server link:

http://phantaco.wwwls21.a2hosted.com/contact/#curated-content

Thanks!

#2

Hello There,

Thanks for writing in! This is the usual behaviour of the navbar because being a fixed navbar, it needs to be triggered with page scrolling. It will only display correctly if you are using one page navigation in the default navbar. One page navigation is not yet available with custom header by the way.

Hope this explains it briefly.

#3

Yes, that explains it, but I still want to find a solution. Can you show me the JS/jQuery command that un-hides the sticky navbar, so that I can trigger it another way? I am already using ScrollMagic on this site, so I am hoping I can use that or another solution to trigger it.

Thanks!

#4

Hi,

You can simple add the x-bar-fixed class to your bar to triggered it.

eg.

jQuery(function($) {
    $( ".my-button" ).on( "click", function() {
  	         $('.my-bar').addClass('x-bar-fixed');
    });
});

That is asuming your bar has my-bar class and the button to trigger has my-button class

Hope that helps.