How to create a responsive header and mobile menu in Bubble

Creating a Responsive Header and Mobile Menu in Bubble

Here's a quick video picking up on a comment that was left on another one of our videos showing Bubble's 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.

Setting Up the Desktop Menu

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

Creating the Mobile Menu Icon

Let's just see how that now behaves. So when the page width gets down to 480, which was a really good guess, 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. The icon is going to the end of my menu and that's centered.

Configuring the Mobile Menu Visibility

This is not going to come in on page load. This is going to come in when page width is larger than or equal to 480. In order to cover every single pixel value, one needs to be your less than and the other one needs to be larger or equal to, 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 responsive editor.

Testing the Responsive Behavior

Okay, so shrink it down, shrink it down and... I think this will be easier to test because in the UI builder here you can manually toggle elements off and on. Let's preview and then let's put it into the browser responsive mode. Oh, and let me also turn off the debugger because that can affect the mobile view.

Adjusting the Mobile Menu Settings

I've got something wrong there because it is visible on page load. When greater than... oh, less than. So that should be the opposite of why it's the same as that statement because I'm using that same 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 use the browser.

Finalizing the Responsive Design

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 responsive because all I'm doing now is focusing on the header. And there you go, so it shrinks down and disappears.

Positioning the Mobile Menu Icon

Now what if I wanted that mobile menu item, the hamburger here, what if I wanted it to appear next to the logo? So I think this is possible in Bubble but we'll see. I'm sure there is. So in here, which is the group, the group has currently got this expression container alignment space between. So I'm going to see if I can add a conditional statement to align left when page width is less than 480. Content alignment... yeah, looks like we can do this with the new responsive engine.

Creating a Modal Pop-up for the Mobile Menu

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 we can have a pop-up in, and then this is going to be very rough. Obviously, you can design things much better than this and you wouldn't be using a fixed layout. In fact, such a bad idea to use fix and change it to a row right now and at least line it up a little bit. Home, About Us, and Contact.

Setting Up the Mobile Menu Workflow

Okay, so how do I get that to show? I add in a workflow when the hamburger is clicked, element show pop-up. There you go, you have a responsive menu now and you have a mobile menu.