Transparent Navbar Parallax Scroll

[tekserv]

Hi,

I was wondering if you could please help me. I have a transaprent navbar for http://idrury.co.uk/ however I have updated the theme to the latest version from 5.2 & the JS solution I had breaks the menu so I had to remove this compeletly.

The issue I have is when I click on a item on the menu & it scrolls to the section the navbar is working correctly but being transparent is 146px above the section. I was wondering if you could assist with getting it so the navbar aligns with the top of the menu section instead of above it.

[tekserv]

Please find images attached how it currently is & what I wish it to be.
Currently

Aim

[basanta]

Hi There,

Thanks for writing in!
Can you please clarify if you have added any custom JS code for the menu effect?
If so please send the JS code so that we can have a look.
If there is JS code please send us your website details so that we can check what could be the issue. Seems this is not the behavior of one-page menu. Some custom code or setting is causing the issue.

Please provide following information:
Set it as Secure Note

• Link to your site
• WordPress Admin username / password
  All the best!

[tekserv]

Hi Basanta,

Please find details below for login

Regards,
Andrew

[christian]

Hey Andrew,

This is the behavior of X. I’m thinking this is a bug because the header offset feature is a function of One Page Navigation but the function persists even when deactivating it. I’m not sure if this is intended though so I’ll post this to our issue tracker. For now, I added this code in your Global JS.

(function($) {
	$('.x-navbar a').on('click touchend',function(e) {
		e.preventDefault();
		var offset = 0;
		var target = this.hash;
		setTimeout(function(){ 
			if ($(this).data('offset') != undefined) offset = $(this).data('offset');
			$('html, body').stop().animate({
				'scrollTop': $(target).offset().top - offset
			}, 500, 'swing', function() {
			});
		}, 1000);
	});
})(jQuery)

See https://youtu.be/1Jx7bc-2p0A

Hope that helps.

[tekserv]

Hi Christian_y

Just tested now working as I hoped thank you & the team as always for your assistance

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!

[alexander]

I just wanted to post a heads up here that for X 6.1 and Cornerstone 3.1 the one page navigation code has been rewritten. It will always try to offset the scroll location by the height of the navbar. Your transparent menu is somewhat of an edge case but it’s something that can be solved with a different custom script. After updating, try adding this code and removing the previous one.

jQuery(function($){
  window.csGlobal.csHooks.filter('ready', function() {
    window.csGlobal.csHooks.filter('hash_scrolling_offset, function(offset) {
      return offset + $('header.masthead').height();
    });
  });
});