How to create a responsive header and dropdown menu bar

Building a Responsive Header and Navigation

Let's build a responsive header and navigation for my Bubble app. I've got the beginnings here of a landing page, a hero section with a two column layout but I want to put a navigation and a menu bar up top. So let's go ahead with a group and this is all in the new response engine. My group is going to be a row because I want it to contain my logo and my links, navigation links throughout my site. So I set the width to 100% and then I'm going to set a min height of 55 and then click make first and it pops it right the way up to the top.

Adding Logo and Navigation Elements

Then let's put in, to save me uploading an image I'm just going to use some text as my logo. Let's make that fit to width content, get rid of these other values that are going to skew my responsive design and then just make it a little bit more logo like. There we go and then I'll center that and what else am I going to add in? Let's add in a couple of buttons on the right hand side so I'm going to add them in here first. So this one will be login and then this one will be sign up.

Positioning Elements in the Header

Okay how do I get them onto the right hand side? So in the, let's just rename this as my header, in my header container my header group I currently have it set as row and I can cycle through these different options here. None of them are going to do it unless I create more nested groups. So I'm going to using shift select both of those buttons and right click and put these into their own row. Let me show you in the inspector. There we go so now I have a group E which contains my two buttons. I'm going to rename this right and that then means that on my header I can put space between and they go over to the right exactly what I want.

Adjusting Spacing and Alignment

That's needing this up a bit. Space, gap spacing between elements. Let's put that as say 12. It puts a little bit of a space in between then let's center it vertically in this vertical alignment. Good that's looking good. Okay now let's preview my design.

Implementing Responsive Design

Okay so I'm following quite a common web design practice here which is that my hero section has got a max width constraint. You'll see I've got it gray just to be able to stand out but my hero section if I go on to the element here my max width is 1240. Now I do want my navigation bar to fully stretch the width of the browser my user is using so I have it set to 100% but I need to neaten it up a little bit. It's not good to have my text and my buttons right on the edge. So how do I fix that? Well I do that with padding.

Adding Padding for Better Layout

So with the header element here, padding and a good rule of thumb is 20 pixels. 20 pixels looks really nice on mobile especially when you reduce it down. So let's go back on to, in fact let's look at our response filter and you can see now that my 20 pixels is maintained as I adjust the size of my menu bar. And you can see that it pops down below. That will be another, the future video is mobile menu, hamburgers, that sort of thing that will be a future video.

Creating Dropdown Menus

Right now let's just add a couple more items onto here. So on my left hand side I'm going to want to create some drop downs. So how do I do that? So let's call this intro and just tie it up. Go get rid of that min height. That's pretty centered. So the same thing I did with the buttons I need to do with everything I want on the left. So holding shift I've clicked on both of them, group them in a row. When a Bubble creates a row element it assumes that you want it the width that the content initially was so I get rid of that min width.

Adjusting Margins and Spacing

I can then, I'm going to, I could use spacing between elements but actually I'm going to use margin here. So apply some margin to the logo. There we go 30 pixels and then I'm going to have these two items in here. So I'm going to put these into a row and let's go with three just because it's easier to see. There it is and now these I can, links or buttons I can create that nice uniformed spacing. Let's name this how to. Just in my hypothetical app and FAQs. Okay let's preview that. Okay brilliant that's looking good.

Implementing Dropdown Functionality

Last thing I'm going to show you is how to make it into a drop-down. So for that I need to create a group focus and group focus is like a floating group but it attaches itself to an element. So I'm going to attach this to my text intro then put a little bit more spacing on the top and then in my group focus if I set this to a column you can see how I could very easily add a series of links into my group focus.

Creating Workflows for Dropdown Menus

How do I show the group focus? I need to use a workflow for that. So these other ones I could use a link element if I was linking them through to a particular page in my site but I could also use a workflow. A link element is better for SEO but in order to show the group focus my drop-down menu I need to use I should use text because I need to run a workflow to show the menu that I want to display and pop up my sub menu.

Setting Up Toggle Actions

So I'll go element actions I'm going to go toggle because I wanted that if someone wants to click on intro again if someone clicks on intro I want it to show if someone clicks on intro again I want it to hide. So toggle is what I need to use and then group focus and let's try it out. So if I click on intro I get my nice looking and very easy to use drop-down menu. There we go!