# ナビゲーションバー上のアイコンのレスポンシブ対応について **URL:** \ **Category:** bubble\ **Tags:** フロントエンド\ **Created:** [2021 年 8 月 14 日午後 2:05 UTC](https://www.nocode-faq.com/t/topic/2048 "2021-08-14T14:05:02Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![matsu5296](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@matsu5296](https://www.nocode-faq.com/u/matsu5296)\ **Post date:** [2021 年 8 月 14 日午後 2:05 UTC](https://www.nocode-faq.com/t/topic/2048/1 "2021-08-14T14:05:02Z")
初歩的な内容だとは思うのですが、自身で試行錯誤した結果、解決できそうになかったため質問に至りました。 何かアドバイスあればよろしくお願いいたします。 ### 前提・実現したいこと - PC・Mobileの両方に対応可能なナビゲーションバー作成したい （あまりイケてない気もしますが…） - PCの場合は以下のように表示させたい ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/optimized/2X/f/f5c85bdd986f309b49f7357d26890273ca9ac880_2_690x36.png) - Mobileの場合は以下のように表示させたい ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/5d8f1803c8dd71dd35b8d023ef76b8952dfdb765.png) ### 発生している問題 - 画面サイズの変更に対してレイアウトが正しく追従していない（レイアウトが崩れている） ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/9/95785cb3127b29a9c9eb4a071cd2bb161dbc5ab7.png) ### 各種設定 - 三つのアイコンすべて同様の設定をしている状況です。 各種オプションの設定、値の変更などもいろいろ試行したのですが、大きくは変わらず、解決方針がわかりかねています。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/e/ece187bd1d167aab072dc6baab8e53c56fbd193c.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/b/b303603a75b49fb70bb7c9adbcc025ae47eed7ab.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/f/f24ad9bd881c0dcb408a784e2579397525d42151.png) ### 補足 Groupの中にアイコンを設定している点については以下URLを参考にしました。 > **[Navigation bar is not responsive](https://forum.bubble.io/t/navigation-bar-is-not-responsive/114959/4)** > > what I do is I put a group around each icon. I make sure the groups all touch. So 3 icons at page width 900, means 3 groups each group 300. Icon in group centre. Then the groups all are not fixed width with min width 10% of original so if you... > what I do is I put a group around each icon. I make sure the groups all touch. So 3 icons at page width 900, means 3 groups each group 300. > Icon in group centre. > Then the groups all are not fixed width with min width 10% of original so if you reduce the page size all groups move closer to another. > (If groups were not touching they would try to maintain the same distance between another.) よろしくお願いいたします。 ---
**Author:** ![micco](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/micco/32/3107_2.png) [@micco](https://www.nocode-faq.com/u/micco)\ **Post date:** [2021 年 8 月 15 日午前 12:21 UTC](https://www.nocode-faq.com/t/topic/2048/2 "2021-08-15T00:21:16Z")
ナビゲーションバーをReusable elementsで作成してると仮定してですけど、 Group等の設定については問題ないと思います。 （実際に私も実装したら問題なく追従してくれました。） 説明に無いので想定ですが、「Group Home」等の上層（大枠のGroup）をFloating Groupで作るとレスポンシブ対応されない現象が起きました。 上側に作っているGroupをそのままFroating Groupにコピーして配置して検証してます。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/a/aea3bc4b08656c7c1ec26578fe8e6932baac7fd0.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/8/8ddd6a51bc61ccfd2093b2080d3b53beda819f8c.png) Reusable elementsは大枠をGroupで作り、使うページ側でFroating Groupの中に Reusable elementsを配置した場合はレスポンシブ対応できました。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/7/704fb1437c369470102806d4917fac51a5bb991f.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/d/d52d83d9a4c1f056ec1f7733aa6088f74c2c596d.png) 参考になれば幸いです 😅 ---
**Author:** ![matsu5296](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@matsu5296](https://www.nocode-faq.com/u/matsu5296)\ **Post date:** [2021 年 8 月 15 日午前 2:16 UTC](https://www.nocode-faq.com/t/topic/2048/3 "2021-08-15T02:16:44Z")
前提伝え漏れていて恐縮です。miccoさんの想定通りになっております。 お答えいただいた内容で対応したところ無事にうまく表示されました！ 何時間も費やしていたので非常に助かりました。ありがとうございました！！ ---
**Author:** ![micco](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/micco/32/3107_2.png) [@micco](https://www.nocode-faq.com/u/micco)\ **Post date:** [2021 年 8 月 15 日午前 2:26 UTC](https://www.nocode-faq.com/t/topic/2048/4 "2021-08-15T02:26:40Z")
無事に表示されたようで良かったですー 😌