How to create a responsive header and mobile menu in Bubble

Headshot of Matt the Planet No Code Bubble Coach

Need 1 to 1 help?

Your no-code consultant & Bubble tutor.

In this Bubble tutorial video we demonstrate how to create a responsive header and mobile menu with the Bubble new responsive engine.

and building a responsive header. Responsive means that when you reduce or change the page size, it adapts to the size of the page or the web browser that the user is using.

So something that can be really helpful and you see a lot, not just in SaaS apps, but in web design in general, is swapping from a desktop menu to a mobile menu. And I'm going to show you how to do that in this video.

When page width is

So at the moment you can see. That we have our desktop menu and it just behaves quite poorly when it shrunk down. So I'm going to select the group that's containing it all and all a condition. So when
is less than, let's go for 480 element visible no. Then just let's cheque my layout options. So we've got collapse when hidden, load on page load. So we're going default desktop secondary, we're going mobile.

So let's just see how that now behaves. So when the page width gets down to 480, which that was. A really good guess, 480, it disappears.

How do I bring in a mobile menu? So I'm going to add an icon and just drop it in here and then rearrange it. So icon is going to the end of my menu and okay, so this is not going to come in the page load. This is going to come in when page width is larger than or equal to.

So in order to cover every single pixel value, one needs to be less and the other one needs to.

Be larger or equal to or kind of vice versa. Otherwise you're going to end up with one pixel value that isn't accounted for, is visible.

Yes. And then collapse when hidden. Let's try that in the
. Shrink it down.

Because I've got it hidden there. Maybe this will be easier to test, I think, because in the UI builder here, you can manually toggle elements off and on.

Let's preview it. And then let's put it into the browser responsive mode. Let me also turn off the debugger because that can affect the mobile view.

Okay, so I've got something wrong there. Because it is
. Yep. Greater than. Oh, that's less than. So that should be the opposite of by those the same as that statement because I'm using that statement to hide it. So actually in this instance, I need to make them both the same because I want the action to happen at the same time.

Let's just see if that was a mistake I made. Let's just use the browser. There we go. So you can see that it shrinks down. I'm just going to delete the elements on this page because I think they are messing with how it looks when it's
. And there you go. So it shrinks down and it disappears.

Now, what if I wanted that mobile. Menu item to the hamburger here, whether I wanted it to appear next to the logo.

Changing container alignment for different screen sizes

So I think this is possible in the Bubble, but we'll see. I'm sure there is so in here which is the group. So the group has currently got this expression
space between and so I'm going to see if I can add a conditional statement to align left. So when page width is less than 480 content alignment. Yeah.

Looks like we can do this with a new responsive engine. There we go. So it aligns it to the logo.

And just to conclude this really quick video, I'm going to just show you how to do like a modal pop over with the hamburger, the mobile menu.

So I can have a

Okay, so how do I get that to show? So I add in a
when the hamburger is clicked.

Element show Pop up.

There you go.

You have a responsive menu now and you have a mobile menu.