レスポンシブ対応時のハンバーガーメニューのクリックに関して

VWSとは フォーラム Lightning レスポンシブ対応時のハンバーガーメニューのクリックに関して

レスポンシブ対応時のハンバーガーメニューのクリックに関して

  • このトピックには2件の返信、2人の参加者があり、最後に対馬 俊彦により2週、 4日前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #54052

    art
    参加者

    ■ 利用テーマとバージョン :
    Lightning バージョン: 14.5.2
    ■ 質問内容:
    添付ファイル画像の赤枠箇所をクリックしたときに展開する方法はございますでしょうか。
    現状は下三角をクリックすると展開します。

    Attachments:
    You must be logged in to view attached files.
    #54062

    以下の CSS を書けば下三角の領域が拡張されて、ご希望の動作になると思います。

    .vk-menu-acc .acc-btn {
    border: none;
    background: var(--vk-menu-acc-icon-open-black-bg-src) right 50% no-repeat;
    width: 100%;
    right: 0;
    top: 0;
    height: calc( 24px + 1.4em );
    background-size: 30px;
    }
    
    .vk-menu-acc .acc-btn-close {
    background: var(--vk-menu-acc-icon-close-black-bg-src) right 50% no-repeat;
    background-size: 30px;
    }

    この場合、モバイルメニューから
    * 当社について
    * 採用企業様
    * 連絡を受けた方
    のページにはアクセスできなくなります。(それを前提としたご質問と思いますが、念のため)

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

    できる!WordPressカスタマイズ #01 簡単なデザイン(CSS)カスタマイズ方法徹底解説

    #54063

    先ほどの CSS を修正します。(メディアクエリを追加)

    @media (max-width: 991px) {
    
    .vk-menu-acc .acc-btn {
    border: none;
    background: var(--vk-menu-acc-icon-open-black-bg-src) right 50% no-repeat;
    width: 100%;
    right: 0;
    top: 0;
    height: calc( 24px + 1.4em );
    background-size: 30px;
    }
    
    .vk-menu-acc .acc-btn-close {
    background: var(--vk-menu-acc-icon-close-black-bg-src) right 50% no-repeat;
    background-size: 30px;
    }
    
    }
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。