サポート » 使い方全般 » Twenty Twenty-Oneでモバイルでデスクトップメニュー表示

  • hiroshitsuchiya

    (@hiroshitsuchiya)


    こんにちは
    Twenty Twenty-Oneでモバイル表示の時にデスクトップのメニューを表示させたいと思ってる。
    モバイルのドロップダウンのメニューではなくてテキストのメニューだね。
    どなたかやり方を知ってる人がいたら教えて欲しい。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • @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の知識が必要となりますが、適宜希望のレイアウトに合わせて調整してみて下さい。

    スレッド開始 hiroshitsuchiya

    (@hiroshitsuchiya)

    Tetsuaki Hamanoさん
    はじめまして!
    返信ありがとう。

    試したところドロップダウンメニューは消えるんだけど
    デスクトップのメニューは出てこない。
    うーん
    chromeの検証見ながら少し追加したりしてみたんだけど
    CSSの知識が乏しいからなのかうまくできず。

    もしよかったら引き続きアドバイスをおねがいしたい。

    @hiroshitsuchiya さん

    こんにちは。

    こちらのフラットな環境では正しく表示されたので、

    • プラグインが影響している
    • 他に独自に記述したCSSが影響している
    • Twenty Twenty Oneのバージョンが古い

    のなどの可能性が考えられますので、原因の切り分けを行ってみて下さい。

    スレッド開始 hiroshitsuchiya

    (@hiroshitsuchiya)

    @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;
      }
    }
    スレッド開始 hiroshitsuchiya

    (@hiroshitsuchiya)

    @wildworks さん

    今回のはデスクトップメニューが表示されたよ。
    ありがとう!

    で、もう少しだけ修正したいところがあって
    1つは
    今現在画面の横幅は余裕があるんだけど
    メニューが以下のように縦に並んでいる。

    abcdefg

    +

    hijklmn

    これをデスクトップの表示と同じように以下のように横に表示することはできないかな?

    abcdefg + hijklmn

    それともう1つ、
    デスクトップ表示だと + に触ると下の階層が吹き出し内に表示されるんだけど今のモバイル表示だとたんなる四角い枠の中に表示される。
    そういった違いがあるんだよね。

    この2点を修正したいのだけど
    もしわかれば教えて欲しい。

    @hiroshitsuchiya さん

    こんにちは。
    細かいレイアウトについては正解がなく、また具体的なコードも書ききれませんので、これ以上のレイアウト調整についてはご自身でお試しいただくか、もしくは専門業者等にご相談いただけないでしょうか。

    スレッド開始 hiroshitsuchiya

    (@hiroshitsuchiya)

    @wildworks さん

    いろいろとありがとうね!
    こちらもいろいろと試しながらやってみるよ。
    ありがとう。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • このトピックに返信するにはログインが必要です。