Build a mobile header and hamburger menu in Bubble

Navigation is the first thing a narrow screen breaks. A header that looks composed at 1440 pixels, logo left, links right, becomes an unusable squeeze at 375, which is why nearly every product on your phone reaches for the same pattern: hide the links, show a hamburger icon, open a menu on tap. This tutorial builds that pattern properly in Bubble, on the bootcamp’s landing page, using an adaptive strategy for the header and a group focus for the menu itself.

You will need a page with a floating group header containing a logo, a nav group with three text links (About, Testimonials, Contact), and working scroll-to-section workflows. Everything below happens in the Bubble editor, mostly in the responsive tab.

A group focus is a container that anchors to a reference element and only appears when a workflow shows it. It is Bubble’s native building block for pop-up navigation, dropdown menus and tooltips, controlled with the Show, Hide and Toggle element actions.

What changes, and where

Work out the breakpoints before touching settings. In the design, the header has three states:

• Above 1200 (desktop): logo left, three nav links right, 156 pixels of side padding.
• 768 to 1200: the nav links disappear and a hamburger icon replaces them; side padding drops to 40. Tablets get the hamburger too.
• Below 768 (mobile): the full wordmark logo swaps for a compact 48 × 48 app icon, and padding tightens to 8 top and bottom, 20 at the sides.

One judgement call worth copying: the design technically changes side padding at 992, but at widths like 1160 that leaves you staring at dead white space for no purpose. Moving the padding change up to the 1200 breakpoint uses the space and looks better, including in a half-width browser window on a desktop.

Step by step: the adaptive header

1. Hide the desktop nav. Select the group wrapping the three links, Group Nav. The visibility conditional must sit on this parent group, not on the individual text elements (if it seems not to work, “reveal in elements tree” and check which element you actually edited). Add the conditional: When Current page width < 1200, This element is visible unchecked.
2. Collapse it. On Group Nav’s Layout tab, tick Collapse when hidden. Without this, the invisible group still occupies its space; the box should always take the shape of its contents, and an invisible element should have none.
3. Configure the floating group. The header cannot share the outer-section style used elsewhere on the page because it is a floating group, so set it directly: container layout Row, container alignment centred, no minimum width, fit width to content off. A fixed height of 64 is fine for a header.
4. Set the padding across breakpoints. Default: 18 top and bottom, 156 each side. Then two conditionals on the floating group: When Current page width < 768, padding top 8, bottom 8, left 20, right 20; and When Current page width >= 768 and Current page width < 1200, padding left 40, right 40, top and bottom unchanged. You can copy a conditional by right-clicking the grey area of the condition and pasting it on another element, which will save you dozens of rebuilds in this module.
5. Swap the logo on mobile. Export the app-icon version of the logo from Figma (it arrives zipped in your downloads; unpack it). On the logo image, add a conditional When Current page width < 768 and change the image source to the icon. The proportions will look wrong until you also set width 48 and height 48 on the same conditional; keep adding properties to one condition rather than duplicating the expression.
6. Add the hamburger icon. From visual elements, drag on a Material Icons element and search for “menu” (there is no icon called hamburger). Size it 24 × 24 and apply your primary icon style. Set it not visible on page load, collapse when hidden, and add the conditional When Current page width < 1200, this element is visible. That shows it on tablets as well as phones, matching the design.
7. Check vertical centring. As the paddings change at smaller widths, elements that were never explicitly centred drift. Set the header’s children to be vertically centred so the logo and icon stay on the midline at every breakpoint.

Because the header row uses space between, the logo and the hamburger sit at opposite edges automatically; you never position the icon manually. Drag through the widths in the responsive tab: nav gone below 1200, icon in its place, compact logo below 768.

Build the menu with a group focus

Now the menu that the hamburger opens: a white panel that drops down below the header with the three nav links stacked inside it.

1. Place the group focus. Drop a Group Focus on the page. It demands a reference element to anchor to; you could anchor to any element and position it with top/left offsets (negative offsets work too), but the right anchor here is the floating group header, so the menu hangs directly beneath it. Leave the offsets at zero for now.
2. Make it full width. Set the group focus’s container layout to Column, remove the fixed sizing, clear every minimum and maximum height, and set its minimum width to 100%. Per cent, not pixels: it should always span its parent, the page.
3. Fill it. Shift-click the three nav texts (About, Testimonials, Contact), copy, select the group focus, paste. Give the group focus a meaningful name like Group Focus Mobile Nav, and check the elements tree for accidents; a stray empty group focus left on the page from earlier fiddling is exactly the kind of thing to delete now.
4. Type the links with a conditional, not a new style. Rather than minting a “mobile nav” font style, reuse Body Large Bold and put the change on the style itself: When Current page width < 1200, font size 16, line spacing 1.25, weight 700. Bubble wants line height as a ratio, and the design gives pixels, so convert: 20 ÷ 16 = 1.25. Every element using the style now adapts, and your app’s font count stays sane.
5. Colour the links. These texts should be the primary colour rather than the body dark grey, and that difference is a one-off, so use a style override on the elements instead of a new style. While you are there, delete the hover conditional the desktop links carried: a phone has no idea where your finger is hovering.
6. Space with gaps, not padding. Give the menu column a row gap of 24 between links. Resist the urge to pad or margin individual links; the gap on the parent does it once, cleanly.
7. Respect the header’s shadow. The design shows 32 pixels from the header to the first link, and 24 from the bottom of the header’s drop shadow. That shadow is 8 pixels of offset with a 20 blur, roughly 28 pixels of visual depth, and the group focus was covering it. The fix that works: push the whole group focus down 8 pixels using its offset, and trim the group focus’s top padding to 4 so the visible spacing matches the design. Expect a couple of rounds in preview to get this right; shadows are measured by eye.
8. Open it with a toggle. On the Material Icons menu element, add a workflow: when clicked, Toggle Group Focus Mobile Nav. Toggle shows the menu if it is hidden and hides it if it is showing, so the one icon opens and closes it with a single action.

Wire up the links

The scroll behaviour already exists on the page’s other navs, so do not rebuild it.

1. Give the menu’s text elements unique names first, so you cannot confuse them with their footer twins.
2. Open the workflow for the existing footer About link, right-click it, copy, then right-click and paste: you now have the same scroll-to-section workflow, and just need to repoint the trigger at the mobile menu’s About text.
3. Add one more action to the pasted workflow: Hide Group Focus Mobile Nav. Without it, the page scrolls nicely behind a menu that never closes.
4. Repeat for Testimonials and Contact. It is the same thing two more times.
5. Tidy as you go: put the workflows into folders (navigation, navigation mobile, navigation footer) so future-you can find them.

Test each link in preview, not just the last one you touched. It is always good to test; you never know what you might break as you go through.

Going further: a drawer-style tablet menu

The full-width drop-down works on tablets, but there is a more polished pattern for the wider screen: a menu panel occupying the left 60 per cent of the screen, header included, with a translucent dark overlay across the rest of the page. Fair warning from the course: this is more advanced and more abstract, and it took real trial and error even on camera. The key moves:

1. Restructure the menu. Group the nav links into a column with a row gap of 48. Set the group focus itself to minimum width 100% and minimum height 100% (minimums, not maximums; setting the max by mistake silently does nothing) and change its background to none, so the group focus becomes a transparent full-screen canvas.
2. Build the panel and the overlay. Make the group focus a Row. Inside it: a white panel group at minimum width 60%, full height, aligned left, holding the nav column; beside it an overlay group at minimum width 40%, minimum height 100%, background #222222 at 80% opacity. That translucent block over the page content is what sells the drawer effect.
3. Bring the header inside. The design shows the header inside the menu surface. Right-click the header’s container and use copy with workflows, then paste with workflows inside the group focus, so the duplicated logo and close icon keep their behaviour. Show this copy only in the tablet range, and hide the floating header’s own contents when Group Focus Mobile Nav is visible so you never see both.
4. Swap the icon. On the Material Icons element, add the conditional when Group Focus Mobile Nav is visible, icon close. Menu open shows a cross; closed shows the hamburger.
5. Cover every case. The visibility conditionals interact, and the failure mode is a width where the header simply vanishes. When the logic stops making sense, simplify: remove conditions one at a time in the responsive tab, watch what each was doing, and rebuild the minimal set that covers all your bases.

This skill in the AI era

Every framework an AI writes has a nav component, so the hamburger itself now costs a sentence of prompting. What still separates good from broken is everything this build made you decide: which breakpoint the swap happens at, that hidden elements must release their space, that the menu has to close itself after navigating, that hover states are meaningless on touch. Those instructions are the difference between reviewing AI output and being surprised by it, and they are precisely the skills that transferred when we moved from Bubble to AI-assisted coding. It is also the level of detail a Claude Code developer works at when a build has to hold up on real phones, not just in a demo.