Floating group menu & navbar: Getting started with Bubble (3.2)
HTML-код
- Опубликовано: 4 фев 2025
- Section 3 (Lesson 2/8): We’re going to focus on the layout of our company dashboard in this interface design lesson. We’ll build a navigation menu on the left and a navbar at the top.
Key highlights include:
• Working with Floating Groups: How these unique containers differ from standard groups.
• Design patterns: We’ll start to implement repeatable patterns for our gap spacing, padding, and margin.
Resources folder:
➡ e6387a14ba6d0b...
Bubble editor:
➡ bubble.io/page...
* * * *
Subscribe to this channel to be the first to hear about new videos!
Bubble is a software development platform that enables anyone to build and launch web applications without writing code. Rather than specializing in one or two aspects of web development (like designing landing pages or building databases), Bubble’s full-stack visual programming interface does it all. That means anyone from first-time entrepreneurs to enterprise-level companies can take an idea from concept to fully functional, scalable reality - faster and cheaper than you could with just code.
Have a question? Please visit bubble.io/support.
Learn more about Bubble:
Homepage ➡ bble.io/8xpka7
Twitter ➡ / bubble
Blog ➡ bubble.io/blog
One of the best tutorial i have follow.. slow, good choice for a french ... great ! thanks !
This is very awesome! Thank you very much sir
My FloatingGroup Nav is staying at 1400px and not reducing to 1140px to stay within the page when the left margin on this element is set to 260px. Fixed-width is unchecked, min-width is removed. Any ideas why?
I've just reach to the same problem. @gregory-john can you help?
Also stuck on this! There 2 ways I got around this; 1. Used 260px padding instead and brought the sidebar to the front. 2. Replaced the type from FloatingGroup to Row. These worked for me but I would still like to know why it doesn't work as expected as a FloatingGroup.
@@Sayersss Same here, I think is a bug in Bubble. If you preview it, you will notice that the error desapears.
When creating a company's system with lots of sections (such as Overview, Jobs, Candidates...), is it a problem to create all of this sections in one page with multiple groups (just like you did) or is it better to create different pages for each section? Thanks!
is there a way to reduce the material icon's line weight (something thinner or thicker?) this is easy in Illustrator with svg files, but i'd rather do it natively in bubble.
Not in the Material Icon set that we're using but there are community icon sets such as Heroicons or Phospor Icons that enable line weight editing.
Hi all.
How do you get your floating group to adjust to the screen size, eg when you move from a desktop to a mobile device (
i wondering if have a simple way to make that sidebar dynamic in a way that i can put an icon that minimizes (reduce the size and make the options invisibles) and open that sidebar. (sorry for the bad english, im from brazil)
Yes you can hide the sidebar with a workflow. This is mostly used in mobile design and not on desktop which has ample space. For desktop you would usually keep the sidebar visible so it require less clicks to navigate the dashboard.
Greg I knew you were gonna change but i thought it was going to be to 16 🤣
I thought it was gonna be 32😂