[Yuzuru Kuroishi]

いつもありがとうございます。

スマホ固定フッターメニューでは、アイコンが上、文字が下に表示されますが、
パソコンメニューでは左右にしか表示されません。

スマホ固定Footerメニューのように

アイコン
メニュー名

みたいに出来ますでしょうか？

もしくは

アイコン　日本語メニュー名
英語メニュー

みたいな構成にすることは可能でしょうか？

ご検討よろしくお願いします。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

メニューの「ナビゲーションラベル」に次のように入力したとします。

<i class="fas fa-home"></i><span class="label">ホーム</span>

その想定で、次の CSS を追加してみてください。

.c-navbar__item > a {
  flex-direction: column;
}

.c-navbar__item > a > .label {
  display: block;
}

♥ 0

いいねをした人: 居ません

[Yuzuru Kuroishi]

ありがとうございます！両方出来ました！！！！！
なんだかすごい嬉しいです。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

できたですか、良かったです！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

v3.6.2 からは、次のように書き換えてください！

<i class="fas fa-home"></i>ホーム

.c-navbar__item > a > span {
  flex-direction: column;
}

↓ 下記は削除
.c-navbar__item > a > .label {
  display: block;
}

♥ 0

いいねをした人: 居ません

[Yuzuru Kuroishi]

早々の対応ありがとうございます。
このCSS以外のカスタマイズをすべて削除して、ハード再読込も行ったのですが、上にアイコンがあがりませんでした。

また、添付のようにヘッダーレイアウトを1行した状態で、ロゴがとんでもなく小さな表示になってしまうようになりました。

今回のアップデート前までは文字が読めるサイズではあったので、可能であれば、パソコンでもスマホのようにロゴのサイズを調整出来るようにしていただけるとうれしいです。

メニューの数は７個でfont awesomeのアイコン読み込みが完了された後、ロゴのサイズが小さくなることが確認できております。

お手数をおかけしますが、確認いただきますようお願いします。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

実際のページの URL を教えていただくことは可能でしょうか？ちょっと実際のコードを見てみないとわからない感じでして…。表に出せないのでしたら、メール等でも構いませんのでご検討ください。

♥ 0

いいねをした人: 居ません

[Yuzuru Kuroishi]

ありがとうございます。
フェースブックメッセンジャーでお送りさせていただきました。
お時間あるときにでもご確認お願いします。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

.c-navbar__item > a > span {
  flex-direction: column;
}

じゃなくて、

.p-global-nav .c-navbar__item > a > span {
  flex-direction: column;
}

としてみてください><

♥ 0

いいねをした人: 居ません

[Yuzuru Kuroishi]

ありがとうございます！
お手数おかけしました。
無事対処出来ました！！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

解決できて良かったです！

♥ 0

いいねをした人: 居ません

[投稿者]

投稿