[ 解決済 ] ハンバーガーメニューの上、または下に「メニュー」と表示したい

[web_sys1208]

■ WordPress のバージョン
WordPress 7.0

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
バージョン: 15.30.2

■ Pro Unit のバージョン
バージョン 0.30.1

■ スキンの種類
Origin III

■ 期待する動作
ハンバーガーメニューの上、または下に「メニュー」と表示したい

■ 自分で試した事

[ 解決済 ] menuと表示する方法

を参考に
「カスタマCSS」に下記を書きましたが
だめです。

.vk-mobile-nav-menu-btn {
text-indent: 2px;
font-size: 10px;
padding-top: 28px;
overflow: visible;
border: none;
}
.vk-mobile-nav-menu-btn.menu-open {
border: none;
}

■ 症状が発生するブラウザ
すべて

■ 実際の症状
表示はアイコンボタンにしているのですが、
その下に小さく「メニュー」または「MENU」と表示したいです

[対馬 俊彦]

そのコードでボタンの下に MENU と表示されるはずですが…

> 表示はアイコンボタンにしているのですが、

デフォルト状態ではないってことでしょうか？

[web_sys1208]

ナビゲーションを利用しています

Attachments:

You must be logged in to view attached files.

[web_sys1208]

自己解決しました
CSSを変更しました

.wp-block-navigation__responsive-container-open {
display: flex;
flex-direction: column;
align-items: center;
}

.wp-block-navigation__responsive-container-open::after {
content: “MENU”;
font-size: 12px;
color: #333;
margin-top: 4px;
}

[対馬 俊彦]

うまくいったようでよかったです。

参考にされた5年前のトピックの CSS は、
Lightning 標準のモバイルメニューのボタンをカスタマイズするコードです。
このボタンには MENU のテキストが隠れていて、それを表示するだけでよいので、
かんたんに表示できました。

[投稿者]

投稿