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 responsive editor.
How to create a row
My group is is going to be a row because I want it to contain my logo and my links, navigation links around 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. Then let's put in to save me uploading an image. I'm just going to use some text as my logo. My logo just make that fit to width of content.
Get rid of these other values that are going to kind of skew my responsive design and then just make it a little bit more logo like. There we go. And then I'll centre to 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.
Grouping groups
Okay, how do I get them onto the right hand side? So 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.
Vertical alignment
There we go. So I now 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. Let's neaten this up a bit space gap spacing between elements. Let's put that at say twelve. Puts a little bit of a space in between. Then let's centre it vertically in this vertical alignment. Good.
That's looking good. Okay, now let's preview my design.
Okay, so I'm following quite a common web design practise here which is that my hero section has got a max width constraint. You'll see I've got it grey 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. So with the header elements here, padding.
Padding
And a good rule of thumb is 20 pixels. 20 pixels. So it's really nice on mobile, especially when you reduce it down. So let's go back onto our responsive editor. And you can see now that my 20 pixels is maintained as I adjust the size of my menu bar.
Right. And you can see there that it pops down below. That will be another future video is kind of mobile menu, hamburgers, that sorts of thing. That will be in a future video. 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 tidy it up.
There we go. Get rid of that min height. That's fully centred. 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 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. I can then, 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 at least 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 in my hypothetical app and FAQs. Okay, let's preview that.
Okay, brilliant. That's looking good. Last thing I'm going to show you is how to make it into a dropdown. 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. How do I show the group focus?
Link element
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 of 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 should use text because I need to run a workflow to show the menu that I want to display.
Pop up my sub menu. So I go element actions I'm going to go toggle because I want it. 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.
