Forum Academy Marketplace Showcase Pricing Features

New Responsive Engine Tutorial - Reusable Header

The first attempt I made at using the new responsive engine was for a basic need of a reusable header.

Click the image below to view the tutorial on youtube.

Reusable Header - New Responsive Engine Bubble.io

Learn More

Boston85719 is an expert Bubbler with a decade experience as an educator. Real name Matthew, he has been actively building SaaS apps, marketplace apps, scheduling apps and more for clients, himself and for sale as templates.

As an official Bubble Bootcamp Instructor, he leads Bubble Bootcamps on a regular basis.

Always willing to offer advice via the Bubble Forum, Matthew also offers Private Personal and Group Training Sessions.

Through his site, NoCodeTrainer, Matthew provides a range of tutorials with editor access to help you jumpstart your Bubble development.

Always accessible you can send Matthew a private message via the forum or send an email directly with your requests.

Be sure to checkout the Stripe Integration Course when you are ready to integrate Stripe payments to start monetizing your application via product sales or subscriptions.

Stripe Integration Course

NoCodeTrainer.com

1 Like

I have added a companion tutorial on using the group focus element as a profile menu

Learn how to create Group Focus Profile Menu in New Flexbox Responsive Engine in Bubble.io

1 Like

thanks for the toturial.
I just cannot make the group focus to work on the new responsive engine.
All focus groups appear on the right edge of the screen (like in your tutorial) even when attached to elements located in other areas of the screen.
did you manage to attach the group focus to elements other than the right edge?
Thanks

1 Like

Yes, I have.


I had just received a report from Bubble support they fixed the Bug associated with the scrollbar that was appearing on page when there was a groupfocus on the page (the one exemplified in the video). Perhaps the fix they pushed through also fixed the issue of where the groupfoucs is, however, I never tested to see if there was a Bug previously with the placement.

1 Like

thanks!

Have you seen the issue fixed as well?

yes, but only if I set my app language to English.
If it’s on RTL language (like Hebrew), the group focus (and floating group) always show on the right side of the screen, not attached to any element.
for example

That is really strange. Definitely worth sending a Bug report in for.

1 Like

Yes. The whole responsive engine for RTL was a mess, they fixed it quickly after I contacted them, but apparently there few issues left. Thanks to your video I realized it’s just the RTL version. Thanks!