fbpx

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になっているか?
  • マージンなど入っていないか?

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

こんにちは、ナオミです!

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴18年です。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通