.svg)
In this tutorial I show how you can create a beautiful mobile menu for your Bubble app. Responsiveness is one of the biggest challenges when building on bubble and having a menu that works smoothly on mobile is a must.
(Lightly edited for clarity)
Today we're going to look at how you can create beautiful mobile menus for your Bubble app. You can see I'm using some conditional formatting to help the formatting on desktop. What I really like is that when we go to mobile there's this little hamburger icon here that takes up space rather than all the text. We can add a bit of an animation to reveal the focus group and some more conditional formatting to highlight the text when it's hovered on mobile.
If we go into the Bubble editor, what you can see at the moment is I have a group here with some pieces of text along with a button. The problem is if we assume that this will work on mobile, whoever is going to see that won't be the case. If we close the screen here, what we see is that after a while, the text gets jumbled and it's really not great from a user experience point of view. So we're going to use some conditional formatting and some hiding rules to make this a bit more appealing.
First of all, we need to figure out when exactly things start to go a bit wrong. We can then put the hamburger icon in at that specific width to avoid any unfortunate user experiences. It's looking okay at 992px. 768px is getting a bit tight, so I think that I'll probably start putting in the visibility rules around the 760px mark just as a nice kind of clean point. So what we're going to do is we're going to go back into our group and we are going to do a bit of formatting here. We are going to say conditional when current page width is less than 760 pixels. We're going to hide this element and we're going to do the same thing for the other elements in this group here. Simply copying and pasting the conditional formatting should suffice. And I actually forgot to change this last part here. You need to put this element is visible and leave that unticked. So let's go back to the first one, remove that and do the same for the other elements in our group up here. This means that when the page goes to 760 pixels or less, as will be the case on all mobile devices, we will no longer see these elements. So hopefully now when we reduce the page size this time around, those elements will no longer be visible.
We can then go about putting in our hamburger icon. So again, that's looking fine. And yeah, you can see there at this with the elements get hidden. We're going back to the bubble editor and now we're going to add in that hamburger icon. So if you go to your visual elements and you go to icon, you can put that in here. We're going to put it in the same group as our other text elements. And we're going to make it the last element in that group. Lets quickly do a bit of formatting to make this look a bit better. I found that 40px by 40px tends to work well for the hamburger icon and make it a fixed width and a fixed height. We're going to vertically align that and we actually have to change the icon to make it the hamburger icon that we want. So we just scroll down here through the icons. It should come up in a second. And there it is, you can see. Finally, we want to change the color on this just a bit.
Now we're going to make that more in line with the rest of our font colors. Okay, so now that we have that, we want to hide this for all of its greater than 760 pixels. So we don't want both the icon and these other elements to be on screen at the same time. So if the other ones are being hidden at 760 or less, this one is going to be hidden at a 760 or more. So we just do that. And we're going to change that as well. And we are going to leave that unticked. Okay, so let's see how this looks now. Hopefully, we should not see the hamburger icon show up on screen straight away. Only when we reduce the screen size should it really appear. So nothing, nothing, nothing. Then you can see just as that goes away, the hamburger icon appears, which is great.
A couple of things on the formatting side, it looks a bit big, so I'm going to reduce the size and I want to put in a bit of a margin just so it's not hugging the right hand side of the page. So let's just do that quickly. And we can move on to the next step. Change the height and width to let's try 35 by 35. And we'll put a bit of a margin on the right hand side, maybe 15.
The next thing we're going to want to do is we're going to want to use a focus group. So these aren't used too often in bubble apps, I've noticed, but they really are useful. And you can find it under containers here. And we're just going to put that anywhere on the page. These are not visible by default. They really are designed purely for menus. In this case, we're going to use a column as a container layout. We are going to make it not a fixed width because we do want to expand a bit under mobile sizes. Smallest screen is generally 320. So I think it's safe with a minimum width of 320 and a max width as infinity. And then in height, a bit of adjustment here. This is going to be much less variable. So let's put it at 400. And that's much too big. So let's actually just go back to let's say 250. And see how we get on with that. You see we have one issue here. And it's remember to fill out the reference element. Now a reference element is the element that the group focus is placed in relation to. So for example, if I was to choose this text here, text we make scheduling. And then you will see that it's going to be placed in relation to that. We make scheduling great. Yeah. Okay. So now because I've set this piece of text as reference element, the group focus is going to beneath that. We can slightly adjust the offset. So for example, we wanted it to go down a bit lower below that text. We could put on 100 here. And it'll go down a bit. We want to make it as left similarly you could be 100 there. In our case, we're going to put it in the middle. And then we're going to go back to our focus group. And we're going to go back to our focus group. And we're going to click reference element. And we're going to say group menu. Now you can see it's much closer to the menu. We're going to get rid of these offsets for a minute just to see how it looks. And now we have a kind of rough idea of where our focus group is going to be.
The next thing we need to do is figure out the trigger to actually reveal this focus group. As I mentioned, these are not set by default. So what we're going to do is we want to click on our hamburger icon there. And click Start and edit workflow. Now we're going to say that when the icon is clicked, we are going to show an element. So we're going to show. Now we're going to show focus. Hey, so we're going to see how this looks on our preview mode at the moment. Hopefully, when we click on the hamburger icon, we're going to be showing that focus group pretty much immediately. So on the mobile view, click on the icon and sure enough, it appears straight away. There's a couple of things I'm not thrilled about at the moment. First of all, there's this gap on the right hand side of it. No kind of symmetrical gap on the left. So we're going to use offset to fix that. And secondly, I don't like the way it just kind of appears straight away.
So let's see if we can work on that as well to make it a bit smoother in terms of transition. We can do that by using animations. So we're back in our workflow section here. What you can see is that the first thing shows the focus group and we want to animate it. So if you go down to element actions and animate, we're going to do transition, slide down in, I think. So first of all, we need to choose the element that we're going to animate. We're going to use focus group A and we're going to look at transition and we're going to go to transition, slide down in. We're going to find a custom duration of, let's say 600 and we'll see how that works. And we're also going to start changing the design here. So we're going to move that style. We're going to give it a plain white background, one, two, three, four, five, six for white. And we're going to use that offset to make it a bit more symmetrical. We're going to put in 15 there. So let's see how our menu is looking at the moment. We want to see the full effects of the animation until we start putting text elements in it, but let's just give it a test out nonetheless. So we're onto mobile view, click on the hamburger icon and we do see a menu appear. I didn't notice too much different there with the animation, but like I said, I think you need the text to really kind of see the full extent of it. So let's start off with that.
Let's put in a group into our focus group. Let's call this group benefits mobile, because we're going to be repeating these pieces of text in these groups. In terms of layout, we're not going to make it fixed. We're going to make it a row. We are going to container align to the left and we are going to get rid of the fixed width there as well. Mean height, probably about 40. And I'm going to let the height fit to the content. The one thing I do want to do is put a border on the bottom of it, just to find the different menu sections. So let's go to define each border independently. Let's go to bottom solid and let's make it a really light gray, just so it's not too in your face. Okay. We're going to put the text in this group here now and we're going to type in benefits. Going to do some quick formatting just to make this more aligned with the rest of the theme of the app. I'm using dm sans as a font for quite a bit of it. A nice and safe one that you can't really go too far wrong with. So let's go look for that now. And let's change some other things along here as well. Let's change the font to 18. I actually like to have it a bit bolder. So actually let's go for dm sans with a 700 weight. And let's go with a 400. So let's go with a 700 weight. Actually, let's just see how it goes so far. And we can come back to it in a minute if we want. Change the color there to that. And we are going to give this a margin on the left hand side as well of 15. We're going to vertically align it. That should make it a bit better. Okay. Now let's see how this looks when we click on the hamburger icon. Hopefully we're going to see a nice animation mode in effect. So again, here on mobile. And yeah, you can see that really kind of nice smoothly comes down. And it's going to look even better when we put the other text elements into it. So let's do that now. Let's just copy this down. Two, three, four, and then five. And we're just going to change the name of the groups here. I haven't really been doing that well so far in terms of naming all the groups. So let's just try and finish off strong. And we're going to change the text here to how it works. I'm going to change the next one. Oh, that's not a format that we wanted. Get rid of that fixed with there. We'll probably do the same for all the others. Change the name of this group to group testimonials. And similarly, we are going to change this text to testimonials. This one we're going to change to and I keep forgetting to change that to fix with there. So let's just do that very quickly for these two. I really should have one correctly and then moved on to the other ones. But these are the way these things go. Change that to pricing. And we see we actually have an extra space at the bottom of our menu here. So we're going to change the height of that down to let's try 240. And we can actually put a minute down to 200. I was just going to fit to it automatically. Perfect. And get started for free. I'm going to change the font on this just to make a big difference because again, it's kind of a call to action throughout the app. So let's make that standard relative to the others. Okay, I think that's looking pretty well at the moment. Let's just do a quick preview one more time. One or two more things to do but nearly there in terms of building our mobile menu. So down to mobile mode. And sure enough, it's symmetrical. We have this group here. And yeah, liking that at the moment. So just two things left to do I think before we're fairly happy with our mobile menu.
First thing is I noticed there that the elements on desktop you seem to be quite far to the left. And I think that's because I'm not collapsing the height of the hamburger icon when it's hidden. And then the second thing we want to do is just add a bit of conditional formatting for the hover on the text here. So if I click on the hamburger icon first and deal with that first issue, what you're seeing is if we go to appearance, and we go to layout, yeah, I should have done collapse when hidden. You'll see now in a second when I refresh the screen, the button was just here. When we collapse that hamburger icon, it's a bit further out and it just looks a bit better. I'm actually going to increase the main height of these groups as well, maybe up to 45. Just to make it a bit bigger. In fact, even 50. Oh, that's actually already been taken. So what I'm going to do is 70. Yeah, that is a bit of a difference. 50 is probably a nice happy medium. So let's do that for all of them. Again, these small things don't make too much of a difference on their own. They do add up overall when you're building an app.
And then last thing we're going to do is just that conditional formatting when you hover the text. Now, the thing is, you're not really going to be hovering text on mobile. This is really only if people for some reason make the screen small on desktop like I've been doing so far. So what we're going to do is click on the text and we're going to say conditional. And we're going to say when this text is hovered, we're going to change the color. And we're going to give it this lighter blue here. We're also going to give it a bit of a transition so that it's not just an immediate hover. What I mean by that is usually when you hover over an element under some sort of conditional formatting, it just changes instantaneously. So you can see on off on off. Again, we want to get a smoother effect. Which thing we have with the menu. So the way you do that is you go back into your editor, you go to this section here at the bottom of the appearance tab. And we're going to go to font color. And I like ease in, ease out at 200 milliseconds. Then we just copy the formatting onto the rest of the elements in here. We're not going to do that for the last one, but for the other four. I think it's good to have them similar. I'm just going to make sure yeah, we still need to do the transitions, unfortunately. So ease in, ease out. One more time for this one, font color, ease in, ease out. And similarly again, font color, ease in, out. And I'm not quite sure why that didn't copy. I guess if you copy formatting, it doesn't obviously copy conditions. Which I should have known. So let's just do that really quickly. And then I think we're pretty much finished with our mobile menu. So let's try this one more time. Onto here, onto mobile menu. And sure enough, we have our conditional formatting.