Hi -
My slidebar and menu options get moved down to the below line in my header as soon as the page is narrowed. Any ideas how to fix this?
Thanks,
Igor
here are the header screenshots from the responsive tab.
2 Likes
was just dealing with this same issue. I found that on mobile I just removed some of the buttons/options… and added a sidebar menu, this removed much clutter, and stopped making the header huge.
Not an ideal solution, but it might solve the issue for now.
1 Like
I added a sidebar menu to the header on mobile but as soon as the page is narrowed, bubble creates an extra row below header. I cant figure out why.
Hi @irotsenmar 
Try placing the Classes, Account, Sign Up, Logout buttons in a “fixed-width” group together, on the far right side of the header. That group should have a “fixed-right margin”. The buttons within that group should be fixed-width and have a “fixed-left margin”
Then place the slidemenu icon to the right of that group with a “fixed-right margin” as well.
The logo should be “fixed-width” and have a “fixed-left margin”.
Then, add a transparent shape between the logo and the buttons (with a minimum width of around 2%). This will make sure that the space between the logo and the navigation buttons will shrink as the page decreases in width.
Right before the page width reaches a size that would make the buttons Group go to the next line, I would hide the transparent shape and the buttons group using a responsive hiding rule. That will collapse the group’s width, so that the Slidemenu icon moves closer to the logo as the page width continues to decrease.
Here is a similar example of how Bubble does this in their public app:
If that doesn’t do it, feel free to share a link to your app’s editor and I’m happy to help take a look!
7 Likes
Hi fayewatson -
Your suggestion worked like a charm! Thank you so much!
1 Like
Awesome! My pleasure! 
This was exactly what I was looking for. Thanks!
By following your instruction I’ve managed to solve my nav bar’s responsiveness, almost.
The last bugging bit is that the profile icon gets hanging when width gets smaller. I want to have a minimum width including the profile icon. I thought I could group the bottom and icon together. But that doesn’t work.
Editor: https://bubble.io/page?type=custom&name=Nav&id=weq&tab=tabs-1
Hi @ohyoonkwn That setup is slightly tricky only because the desktop group of icons is large, which can cause the right side icon to break to the next line as the page decreases in width.
It might be easiest to have a “desktop group” (with the icons in the middle and the profile picture on the right) and a “mobile group” (with all of the icons next to each other) that are shown conditionally.