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

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

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

Naomi Suzuki

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

目次

「Elementorのメニューアンカーが固定ヘッダーの下に来るのを防ぐ方法」への2件のフィードバック

  1. 初めまして。Elementor初心者です。大変分かりやすい記事と動画をいつもありがたく参考にさせていただいています。
    こちらのCSSを設定し、無事PC表示は修正できたのですが、スマホ表示が変わらずヘッダーとかぶって表示されてしまいます。
    追加のCSSで修正出来るのでしたらご教授いただけると幸いです。
    よろしくお願いいたします。

コメントする

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

Elementorの無料ウェブサイトテンプレート
新規追加されました。

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

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

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