Elementorのメニューアンカーが固定ヘッダーの下に来るのを防ぐ方法

Elementorのメニューアンカーウィジェットと固定ヘッダー(スティッキー)を同時に使うと、リンクがクリックされた時に固定ヘッダーがメニューアンカーウィジェットの上にきます。

この記事に貼ってあるコードをサイトに入れると、そのバグが修正されます。

メニューアンカーウィジェットの使い方はこちら！
＞＞【Elementor一般『メニューアンカー』ウィジェットの使い方】

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Elementorのメニューアンカーのズレを直すJavaScript

<script>

jQuery( function( $ ) {
	// Add space for Elementor Menu Anchor link
	$( window ).on( 'elementor/frontend/init', function() {
			if ( window.elementorFrontend ) {
				elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function( scrollTop ) {
					return scrollTop + 220;
				} );
    	}
	});
	
} );
</script>

ブラウザのアンカーリンクのズレを直すCSS

<style>
	body:not(.elementor-editor-active) .elementor-widget-menu-anchor {
	  position: relative;
	  z-index: -1;
	}

	body:not(.elementor-editor-active) .elementor-menu-anchor:before {
	  content: "";
	  display: block;
	  height: 220px; /* fixed header height*/
	  margin: -220px 0 0; /* negative fixed header height */
	  visibility: hidden;
	  pointer-events: none;
	}
</style>

JavaScriptのエラーが出る場合はCode Snippetかfunctions.phpを使う

JavaScriptのエラーが出る場合は、挿入したコードの位置がjQueryよりも前にきてる可能性があります。それを変えるには、Code Snippetのプラグインを使うかまたはfunctions.phpに次のコードを書いてください。

add_action( 'wp_footer', function() {
	?>
		<script>
		jQuery( function( $ ) { 
				// Add space for Elementor Menu Anchor link 
					if ( window.elementorFrontend ) { 
					  elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function( scrollTop ) { 
					    return scrollTop + 220; 
			    	  } ); 
			       } 
		});
        </script>
   <?php
}, 100);

それでもうまくいかない場合は、ヘッダーの設定をみる

CSSもJavaScriptもロードされてるのになぜかうまくいかない場合はヘッダーの設定を見ます。

• オフセットは0になっているか？
• マージンなど入っていないか？

チェックしてみてください。