Two menu problems

Hi there,

Can you link me to the site possibly? Thanks!

Sure! Here it is. Thanks!

1) Someone had a similar problem before but I can't seem to find the solution. Will ask Tom to have a look :)

2) You can try initiate the mobile header at a larger width before the menu turns into two rows: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

1. This topic might be a push in the right direction: https://generatepress.com/forums/topic/sticky-menu-offset/

Let me know :)

Thanks Leo and Tom!

I tried the two things and I don't know why they doesn't work.

1) I pasted that code into my aditional css using @media (min-width: 500px) and (max-width: 768px). Nothing happened. I tried pasting it as it is in the example, with max 768, but didn't work as well.

2) I introduced the code in the wp footer, I changed 70 to 65 (the height of my navigation) and I added smooth as a css class in my menu items. Nothing happened too.

I deleted cache, I tried in every device I have, but no changes.

Could you kindly help me? I have to be doing something wrong.

Try changing the px number to 1150px in this code: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

As for the sticky menu offset I'll ask Tom to take another look :)

I changed the px number to 1150px, and the navigation bar (the header too) disappeared :(

is the mobile header feature still activated in the customizer? https://docs.generatepress.com/article/mobile-header/

I didn't. Now that I enabled it, the menu doesn't work (I click in the hamburger and nothing appears), the navigation on my mobile phone now is in two rows, and the header is still dissapeared.

Weird, I posted this last night, guess it didn't come through.

The smooth scrolling you added isn't working as your jQuery file is deferred, so it's showing up after the code that requires it.

So, remove that code from the wp_footer hook, and try adding this function:

add_action( 'wp_enqueue_scripts', 'tu_add_smooth_scroll' );
function tu_add_smooth_scroll() {
	if ( function_exists( 'wp_add_inline_script' ) ) {
		wp_add_inline_script( 'jquery', 
			"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);
						}
					}
				});
			});"
		);
	}
}

Adding PHP: https://docs.generatepress.com/article/adding-php/

Doing this should fix the above issue as well.

Thanks Tom, but it is still not working :(

Can you try excluding jquery.js from any caching/deferring plugins you have activated?

Yes, I deactivated Async JavaScript, Autoptimize (which only had activated the html and css optimization), and the cache plugin, but it is still not working :(

Hmm, I'm not seeing the above code added.

Can you remove that function and try the first method again (in the wp_footer hook)?