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

コミュニティ

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

トピックス by usersh 36 pt 2023年9月20日 15:08 228 PV
1.相談したいWidgetの情報

　1.画像

　2.Widget名

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

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

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

2.相談内容

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

②このwidgetはアコーディオン式にサブメニュー的に展開されるものだと思うのですが、現状機能しておらず、こちらの原因と対処法をご教示いただけますでしょうか…？
widgetマスター 1 年, 2 月前 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
  
  早速お試しいただきありがとうございます！
  
  また何か不明点ありましたらお気軽にご相談ください☺

widgetマスター

widgetマスター

usersh

widgetマスター