[ 解決済 ] 「Header Top Navigation」をスマホでも表示したい。

[tatsuya]

■ 利用テーマとバージョン :Lightning Proバージョン: 8.11.0

■ 質問内容：
「Header Top Navigation」をスマホでも表示したいです。
現在ページのトップにロゴが来ているので、その上に「Header Top Navigation」を表示する方法が知りたいです。
よろしくお願い致します。

[対馬 俊彦]

以下のような CSS を追加することにより、Header Top Navigation メニューがスマホでも表示されるようになります。

@media (max-width: 991px) {

/* ヘッダー上部エリアを表示 */
.headerTop {
display: block;
}

/* ヘッダー上部エリアを右寄せ */
.siteHeader .headerTop .container {
justify-content: flex-end;
}

/* キャッチフレーズを非表示 */
.headerTop .headerTop_description {
display: none;
}

/* Header Top Navigation を表示 */
.headerTop nav {
display: block;
}

/* お問い合わせボタンを非表示 */
.headerTop .headerTop_contactBtn {
display: none;
}

}

CSS 追加作業手順に関する参考ページ ↓

https://www.vektor-inc.co.jp/post/wordpress-css-customize-2020/

[tatsuya]

ありがとうございます。
頂いた内容で解決しました。

[投稿者]

投稿