WEB広告運用の困りごとが集まる場所 コミュニティ コミュニティ 開閉式アコーディオンナビ付きヘッダーのWidgetについて

  • 開閉式アコーディオンナビ付きヘッダーのWidgetについて

    トピックス by usersh ユーザーランク 36 pt  2023年9月20日 15:08 115 PV

    1.相談したいWidgetの情報

     1.画像

     2.Widget名

      ヘッダー(開閉式アコーディオンナビ付き)※要javascript(アクション)

     3.プレビューページのURL

      https://sb-draft-preview.squadbeyond.com/articles/uIvvmNRPBoBPYdccLw/draft?token=d5a40872720f43bfa6f75a4d3c676d61

    2.相談内容

    ①「私たちについて」や「インタビュー」の部分が改行されてしまっているのですが、改行されずに1行で表示するにはどのようにすれば良いでしょうか?

    ②このwidgetはアコーディオン式にサブメニュー的に展開されるものだと思うのですが、現状機能しておらず、こちらの原因と対処法をご教示いただけますでしょうか…?

    widgetマスター   9 月前 2 人 · 4 コメント
  • 4 コメント
  • widgetマスター

    モデレータ
    2023年9月20日 15:12

    ご相談ありがとうございます!

    確認させていただきますね!

    作業していく中で不明点がありましたらこちらに返信させていただきます!

  • widgetマスター

    モデレータ
    2023年9月20日 17:12

    お待たせいたしました!

    ご案内させていただきます!

    1. CSSに下記記述を追加

    .header__pcNav .item a {
      text-decoration: none;
      font-size: 16px;
      color: #000;
      width: 100%;←追加
    }

    2. CSSの下記記述をCSSの一番上に移動

    a {
      color: inherit;
      text-decoration: none;
      width: 90%;
      height: auto;
      display: block;
    }

    アコーディオンが動かない問題については、該当のHTMLの記述を削除してしまっていることが原因ですので、以下を追加してください。
    ※オリジナルのソースコードにも記述はありますので、そこから持ってきてもOKです
    ※画像は適宜変更してください。

    <div class="header__item02">
     〜
    </div>
    <div class="header__item03 _pcNone js-navSwitch"><!--追加-->
     <img src="https://file.mysquadbeyond.com/uploads/article_photo/photo/3039624/3267e0dc-2f2f-44a3-ae29-181f9f0c9f7d.webp" draggable="false">
    </div><!--追加ここまで-->

    ご相談にはありませんでしたが、メニューの数がありフォントサイズを最大限小さく(10px)してもロゴに被ってしまう画面サイズがあったので、ロゴに被る前に2段になる設定を共有させていただきます!必要であれば使用してください。

    .header__rightBox {
      /*width: calc(100% - 100px); 不要*/
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    〜
    
    @media screen and (min-width:601px) {
       〜
    
       .header__pcNav._spNone {
        display: flex;
        flex-wrap: wrap;/*追加*/
        margin-right: 0;/*追加*/
        margin-left: auto;/*追加*/
        width: calc(100% - 160px);/*横70pxずつの画像+メニュー左に20pxの余白*/
        padding-left: 20px;/*左に余白(余白の大きさ、上記の横幅は適宜設定してください)*/
      }
    }

    プレビュー:https://sb-draft-preview.squadbeyond.com/articles/vAMFUBtjoLLMngDTKA/draft?token=87601b6972547a854882dd8a408c060a

    • usersh

      メンバー
      2023年9月20日 17:25

      無事解消されました!

      誠にありがとうございます!

    • widgetマスター

      モデレータ
      2023年9月20日 17:26

      早速お試しいただきありがとうございます!

      また何か不明点ありましたらお気軽にご相談ください☺