モバイルのヘッダーに”ヘッダーコンテンツ”を表示【Snow Monkey】カスタマイズ

モバイルのヘッダーに「ヘッダーコンテンツ」を表示するカスタマイズを行なった。

ヘッダーレイアウトは「中央ロゴ」の設定を前提としている。

↓ カスタマイズ後はこちら

まずは、モバイルのハンバーガーボタンを「左」に移動する。

これは、管理画面の[カスタマイズ] > [デザイン] > [ドロワーナビゲーション]を開くと、

ハンバーガーボタンの位置のメニューがあるので、ここを左にする。

次に、[カスタマイズ] > [デザイン] > [ヘッダー] の中にある「ヘッダーコンテンツ」に、以下のようにコードを追加した。（ブロックエディターでボタンを作り、HTML表示にしてコードを作成した）

<div class="wp-block-snow-monkey-blocks-btn smb-btn-wrapper is-style-ghost"><a class="smb-btn" href="https://mono96.jp/link/" style="background-color:#333;border-radius:0px;border-color:#333"><span class="smb-btn__label" style="color:#333">無料メルマガ</span></a></div>

次に、CSSに下のコードを追加すると、モバイルでも、「ヘッダーコンテンツ」が表示される。

/* header btn */

.p-header-content.p-header-content--lg {
    font-size: 13px;
}


.p-header-content.p-header-content--lg a.smb-btn {
    padding: 10px 30px;
}

@media (max-width: 1023px){
.u-invisible-md-down {
    display: block !important;
}

.l-center-header__row.u-invisible-md-down {
    display: none !important;
}
.p-header-content.p-header-content--lg a.smb-btn {
    padding: 6px 6px;
	font-size:11px;
}
	
.c-row.c-row--margin-s.c-row--lg-margin.c-row--middle.c-row--between.c-row--nowrap .c-row__col:nth-child(2),
.c-row.c-row--margin-s.c-row--lg-margin.c-row--middle.c-row--between.c-row--nowrap .c-row__col:last-child{
	display:none !important;
	
	}
}