Sticky menu offset.

There isn't a "best practice" way to achieve this, which is why it isn't in GP.

There's this method, which you can place into your wp_footer hook using GP Hooks:

<script>
jQuery(function($) {
	$('li.smooth > a[href*="#"]:not([href="#"]), a.smooth[href*="#"]:not([href="#"])').on( 'click', function(e) {
                e.preventDefault();
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			var target = $(this.hash);
			target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
			if (target.length) {
				$('html,body').animate({
					scrollTop: target.offset().top - 70
				}, 500);
			}
		}
	});
});
</script>

This would require you to add the smooth class to your menu items: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then you would change the 70 value to the height of your navigation.

Thank you Tom, this solves the issue. Well done Tom, really appreciate it.

Would you mind if without opening new thread I'll post some more things to discuss please?

1. Slide-out menu auto collapse. It used to close down after clicking, now for some reason it stopped and stays opened after a button is clicked. Is this because of the above code/class?

2. White space handling. I'm not sure if this is page builder or the theme's issue.
After I updated Elementor to 1.5.x suddenly all &nbsp tags started to show as text instead of space. Can you point me into right direction please (GP/Elementor?)

3. Overlapping colums in mobile view. I cannot find the culprit why one column overlaps another. When you navigate to "Zespół" section in mobile view one column overlap another. There's no padding/margin added and all looks OK in my page builder, but when viewed on mobile or simulation of mobile view in CHrome these two columns don't look right.

Many thanks for any help with these.

Best.
Rafal.

Hi there,

1. I just edited the code above: https://generatepress.com/forums/topic/sticky-menu-offset/#post-344802

Can you see if it fixes this issue?

2. I would have to see it, however I'm assuming it's an Elementor issue.

3. Since these areas are built using Elementor, you'll likely need to check with them as GP doesn't control it.

Tom thank you for your reply and sorry for a long break since you replied.
It seems that the code provided solved 99% of the issue. Only when you click HOME the menu won't collapse. Is it fixable?

Is there any way you can link me to the page?

It's mentioned in the 1st post :)
t.inventi.pl

Interesting, can you try linking to the Home button to #masthead

TY Tom, it collapses now but does not scroll right up, it only bounces up by some 50px (does not bounce on FF mobile, only collapses)

Talking about scrolling, is there a way to slow down auto-scrolling speed or is it browser's native behaviour?

Try adding this into the Before Header hook in GP Hooks: <a name="top"></a>

Then link it to #top.

Adjust the 500 value in the code to something higher to slow it down.

Tom

I used the JS at the top of this thread. It seems it only works for a one page site??

Works perfectly on my homepage. But does not work if I am on another page of my site and click on the menu link associated with an anchor on my home page.

Is there a solution for this?

Kind Regards

Max

Yes, that code is only for one page websites.

Not sure it's possible to do this for other pages, but I'll look into it.

It is possible. Because the Scroll on Id plugin achieves it. However, I would much rather a simple JS snippet solution like your SMOOTH code that I can just add to my functionality plugin and keep my plugin bloat down.

Probably best to use the plugin in that case - the solution likely wouldn't be as simple as the other code.