@hiroshitsuchiya さん
はじめまして。
CSSの上書きで対応出来ると思います。
例えば、以下のようなCSSをカスタマイザーの「追加CSS」に設定してみて下さい。
@media only screen and (max-width: 481px) {
.menu-button-container #primary-mobile-menu {
display: none;
}
.primary-navigation {
position: static;
width: 100%;
}
.primary-navigation > .primary-menu-container{
position: static;
opacity: 1;
height: auto!important;
visibility: visible;
padding: 0;
transform: initial;
}
.primary-navigation > div > .menu-wrapper {
padding-bottom: 0;
}
}
CSSの知識が必要となりますが、適宜希望のレイアウトに合わせて調整してみて下さい。
Tetsuaki Hamanoさん
はじめまして！
返信ありがとう。
試したところドロップダウンメニューは消えるんだけど
デスクトップのメニューは出てこない。
うーん
chromeの検証見ながら少し追加したりしてみたんだけど
CSSの知識が乏しいからなのかうまくできず。
もしよかったら引き続きアドバイスをおねがいしたい。
@hiroshitsuchiya さん
こんにちは。
こちらのフラットな環境では正しく表示されたので、
- プラグインが影響している
- 他に独自に記述したCSSが影響している
- Twenty Twenty Oneのバージョンが古い
のなどの可能性が考えられますので、原因の切り分けを行ってみて下さい。
@wildworks さん、ありがとう！
こちらもフラットな環境で試したところデスクトップのメニューが表示されるところまではできた。
で、1つ問題があって
このメニューが全部展開されて表示されるんだよね。
デスクトップでは入子って言うのかな？階層になっているのが+をクリックすると展開されるようになるんだけど今回のだとその+がなくって全部表示される。
そちらの環境でも同じかな？
もし、同じだとすればデスクトップ表示と同じように展開してない、+が表示される方法が分かれば教えて欲しい。
@hiroshitsuchiya さん
以下のコードではいかがでしょうか。
@media only screen and (max-width: 481px) {
.menu-button-container #primary-mobile-menu {
display: none;
}
.primary-navigation {
position: static;
width: 100%;
}
.primary-navigation > .primary-menu-container{
position: static;
opacity: 1;
height: auto!important;
visibility: visible;
padding: 0;
transform: initial;
}
.primary-navigation > div > .menu-wrapper {
padding-bottom: 0;
}
.primary-navigation > div > .menu-wrapper .sub-menu-toggle {
display: flex;
}
.primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded=false] ~ ul {
display: none;
}
}
@wildworks さん
今回のはデスクトップメニューが表示されたよ。
ありがとう！
で、もう少しだけ修正したいところがあって
1つは
今現在画面の横幅は余裕があるんだけど
メニューが以下のように縦に並んでいる。
abcdefg
+
hijklmn
これをデスクトップの表示と同じように以下のように横に表示することはできないかな？
abcdefg + hijklmn
それともう1つ、
デスクトップ表示だと + に触ると下の階層が吹き出し内に表示されるんだけど今のモバイル表示だとたんなる四角い枠の中に表示される。
そういった違いがあるんだよね。
この2点を修正したいのだけど
もしわかれば教えて欲しい。
@hiroshitsuchiya さん
こんにちは。
細かいレイアウトについては正解がなく、また具体的なコードも書ききれませんので、これ以上のレイアウト調整についてはご自身でお試しいただくか、もしくは専門業者等にご相談いただけないでしょうか。
@wildworks さん
いろいろとありがとうね！
こちらもいろいろと試しながらやってみるよ。
ありがとう。
