# Responsive Design Issue - Header Menu Collapsing To Second Line **URL:** \ **Category:** Responsiveness\ **Created:** [February 26, 2021, 8:27pm UTC](https://forum.bubble.io/t/responsive-design-issue-header-menu-collapsing-to-second-line/138497 "2021-02-26T20:27:54Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![help](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/help/32/166707_2.png) [@help](https://forum.bubble.io/u/help)\ **Post date:** [February 26, 2021, 8:27pm UTC](https://forum.bubble.io/t/responsive-design-issue-header-menu-collapsing-to-second-line/138497/1 "2021-02-26T20:27:55Z")
Hi all, Does anyone know why a header element will collapse like this? The breakpoint is only 1200px before it collapses to the next line: ![Screenshot 2021-02-26 at 20.27.02](https://us1.discourse-cdn.com/bubble/original/3X/6/a/6acf83331768b717b13b236fbaf1369700658876.png) ![Screenshot 2021-02-26 at 20.27.10](https://us1.discourse-cdn.com/bubble/original/3X/9/2/92181b701e5a469dac3fc936ac40a2a29aa4fe24.png) Please let me know if you have any suggestions Thanks, Reece ---
**Author:** ![johnny](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/johnny/32/203020_2.png) [@johnny](https://forum.bubble.io/u/johnny)\ **Post date:** [February 26, 2021, 9:21pm UTC](https://forum.bubble.io/t/responsive-design-issue-header-menu-collapsing-to-second-line/138497/2 "2021-02-26T21:21:41Z")
Hey @help, Have you tried putting a transparent group between the product logo and button? Don’t make it fixed width, but non-fixed width. I hate this responsive editor because you need to use little weird tips and hacks to try to make stuff work lol ---
**Author:** ![Christophe\_HK](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Christophe\_HK](https://forum.bubble.io/u/Christophe_HK)\ **Post date:** [February 26, 2021, 9:46pm UTC](https://forum.bubble.io/t/responsive-design-issue-header-menu-collapsing-to-second-line/138497/3 "2021-02-26T21:46:02Z")
Also, check in the responsive editor that your button at the right is right aligned and your logo at the left is left aligned, and of course that the main group is not set to fixed size. ---
**Author:** ![yusaney1](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/yusaney1/32/217015_2.png) [@yusaney1](https://forum.bubble.io/u/yusaney1)\ **Post date:** [February 26, 2021, 11:34pm UTC](https://forum.bubble.io/t/responsive-design-issue-header-menu-collapsing-to-second-line/138497/4 "2021-02-26T23:34:41Z")
The “best” way to handle that situations it’s to create a Shape element with transparent background and no borders between the left logo and right button and make sure it’s not fixed width as @johnny said. ---
**Author:** ![cmarchan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/cmarchan/32/253062_2.png) [@cmarchan](https://forum.bubble.io/u/cmarchan)\ **Post date:** [February 27, 2021, 3:28am UTC](https://forum.bubble.io/t/responsive-design-issue-header-menu-collapsing-to-second-line/138497/5 "2021-02-27T03:28:22Z")
Check explain margins. @johnny guidance should fix the problem. My understanding is that Bubble handles responsiveness horizontally. This may be why adding a middle “responsive” group in the same line eliminates the large margin between both elements and makes them “respond” more predictably. ---
**Author:** ![help](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/help/32/166707_2.png) [@help](https://forum.bubble.io/u/help)\ **Post date:** [February 27, 2021, 3:52pm UTC](https://forum.bubble.io/t/responsive-design-issue-header-menu-collapsing-to-second-line/138497/6 "2021-02-27T15:52:07Z")
Thanks a lot! A Shape sorted it on the same line ---
**Author:** ![help](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/help/32/166707_2.png) [@help](https://forum.bubble.io/u/help)\ **Post date:** [February 27, 2021, 3:52pm UTC](https://forum.bubble.io/t/responsive-design-issue-header-menu-collapsing-to-second-line/138497/7 "2021-02-27T15:52:34Z")
Thank you adding a responsive Shape sorted it on the same line - not sure why that is needed but it worked great ---
**Author:** ![help](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/help/32/166707_2.png) [@help](https://forum.bubble.io/u/help)\ **Post date:** [February 27, 2021, 3:52pm UTC](https://forum.bubble.io/t/responsive-design-issue-header-menu-collapsing-to-second-line/138497/8 "2021-02-27T15:52:43Z")
Thanks a lot! ---
**Author:** ![help](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/help/32/166707_2.png) [@help](https://forum.bubble.io/u/help)\ **Post date:** [February 27, 2021, 3:53pm UTC](https://forum.bubble.io/t/responsive-design-issue-header-menu-collapsing-to-second-line/138497/9 "2021-02-27T15:53:00Z")
Thank you the shape was the solution ---
**Author:** ![boston85719](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boston85719/32/77286_2.png) [@boston85719](https://forum.bubble.io/u/boston85719)\ **Post date:** [February 27, 2021, 5:43pm UTC](https://forum.bubble.io/t/responsive-design-issue-header-menu-collapsing-to-second-line/138497/10 "2021-02-27T17:43:26Z")
I try to avoid unnecessary elements as much as possible. For something simple like this it is probably better to not use an unnecessary element and instead just rely on the alignment settings. ![Screen Shot 2021-02-28 at 12.42.52 AM](https://us1.discourse-cdn.com/bubble/original/3X/c/9/c9c9327b6bcaad98b046d133f51be66aee12306f.png) ![Screen Shot 2021-02-28 at 12.42.42 AM](https://us1.discourse-cdn.com/bubble/original/3X/d/e/def34ad236d273953f25c93efced7ec6654cee4b.png) ![Screen Shot 2021-02-28 at 12.42.36 AM](https://us1.discourse-cdn.com/bubble/original/3X/e/a/eaa66c20d119a95f3ee930e5db12eb4ecba14282.png) ---
**Author:** ![help](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/help/32/166707_2.png) [@help](https://forum.bubble.io/u/help)\ **Post date:** [February 27, 2021, 6:34pm UTC](https://forum.bubble.io/t/responsive-design-issue-header-menu-collapsing-to-second-line/138497/11 "2021-02-27T18:34:27Z")
Thank you - I’ll take a look at that but for a fast fix the shape is fine. There are a couple of hidden groups within that navbar as well which just makes it trickier ---
**Author:** ![Christophe\_HK](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Christophe\_HK](https://forum.bubble.io/u/Christophe_HK)\ **Post date:** [February 27, 2021, 9:52pm UTC](https://forum.bubble.io/t/responsive-design-issue-header-menu-collapsing-to-second-line/138497/12 "2021-02-27T21:52:28Z")
I do the same! ---
**Author:** ![pauneka](https://avatars.discourse-cdn.com/v4/letter/p/a9adbd/32.png) [@pauneka](https://forum.bubble.io/u/pauneka)\ **Post date:** [January 9, 2022, 11:42pm UTC](https://forum.bubble.io/t/responsive-design-issue-header-menu-collapsing-to-second-line/138497/13 "2022-01-09T23:42:52Z")
This worked for me perfectly. Tried to figure it out by myself, but with this tip in responsive editor it just worked.