How to create a responsive header and dropdown menu bar
In this Bubble.io tutorial we demonstrate how to create a responsive header bar and dropdown sub menu for your Bubble app.
Master responsive design: Learn how to create a header that adapts seamlessly across devices using Bubble's responsive engine.
Craft the perfect navigation: Discover techniques for building an intuitive menu bar with dropdowns and custom styling in Bubble's responsive editor.
Elevate your Bubble skills: Transform your app's UI with pro tips on spacing, alignment, and mobile optimization for headers and menus.
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!
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.