How to Create a Mobile Hamburger Menu in the Builder

Give your page visitors the ability to quickly and easily navigate your mobile page by adding a slide‑out hamburger menu to your mobile page with a few custom classes, plus one JavaScript and one CSS snippet. This article walks you through everything step by step.

What this hamburger menu does

• Shows a hamburger button () on mobile that opens a slide‑out drawer from the right side.
• Lets you add navigation buttons inside the drawer that link (anchor) to sections on your page.
• Closes when a visitor taps any navigation button or the close button.
• Stays hidden on desktop (you’ll design and position it in the mobile view).

Before you start

You’ll need:

• A landing page in the Builder.
• Basic comfort adding custom JavaScript and CSS in Unbounce (we’ll outline exactly where to paste each snippet).
• Your mobile layout already set up, with the sections you want to link to (for example, “Features”, “Pricing”, “Contact”).

Step 1: Create the menu section, drawer, and buttons

You’ll first build the menu “drawer” using regular Unbounce elements so you can style it visually.

1. Open your page in the Builder.
2. Switch to the Mobile view in the top center of the Builder.
3. Add a new Section near the top of the page and name it something like “Menu” to keep things organized.
4. Inside this section, create:
   • A hamburger button (this will be the icon visitors tap to open the menu).
   • A drawer (the tray that slides in), built as a Box or section that will hold your nav buttons.
   • A close button inside the drawer (for example, a small “X” button at the top right).
5. Inside the drawer, add one Button for each navigation link you want (e.g., “Product”, “Pricing”, “Contact”). These can anchor to specific sections on the page using standard Unbounce button link settings.

You can freely style fonts, colors, and spacing for all of these using the Properties panel; the custom code will only control how the drawer shows and hides.

2.1 Add the class to the drawer (tray)

1. Select the Box that acts as your slide‑out drawer.
2. In the right‑hand Properties panel, scroll down to the Element Metadata or CSS Classes field (depending on your Builder view).
3. Add this class name:
   • menuslide
4. If there are existing classes, add menuslide separated by a space (do not delete other classes you may be using).

This tells the script which element is the sliding drawer.

2.2 Add the class to the hamburger menu button

1. Select your hamburger button in the mobile view.
2. In the Properties panel, locate the CSS Classes field.
3. Add this class name:
   • menu-toggle
4. Again, if there are existing classes, add menu-toggle after a space.

Any element with menu-toggle will toggle the drawer open/closed when clicked.

2.3 Add the class to the close button inside the drawer

You want the close button to do the same thing as the hamburger: toggle the drawer.

1. Select the close button inside your drawer.
2. In CSS Classes, add:
   • menu-toggle
3. Keep any existing classes and add menu-toggle separated by a space.

Now your close button will also open/close the menu drawer.

Step 3: Make the menu buttons close the drawer

By default, any Unbounce button inside the drawer will close the drawer automatically when clicked because of the script you’ll add next.

To ensure this works:

1. Make sure your navigation items inside the drawer are actual Buttons (element type lp-pom-button), not just text links.
2. Optional: If you have other buttons inside the drawer that you don’t want to close the menu, consider using a different element type or placing them outside the menuslide container.

Step 4: Add the custom JavaScript

You’ll now add the JavaScript that moves the drawer to the end of the page body and handles the open/close behavior.

1. At the bottom of the Builder, click Javascripts.
2. Click Add New JavaScript.
3. Give it a name like “Mobile Hamburger Menu”.
4. Set Placement to Before Body End Tag.
5. Set Included on to This Page (unless you want to reuse this across multiple pages and are comfortable managing page‑level differences).
6. Paste the following code into the script editor:

<script>
document.addEventListener('DOMContentLoaded', function () {
  const menu = document.querySelector('.menuslide');
  if (menu) {
    document.body.appendChild(menu);
    menu.classList.remove('nav-toggled');
  }
  document.addEventListener('click', function (e) {
    const menu = document.querySelector('.menuslide');
    if (!menu) return;
    const btn    = e.target.closest('.menu-toggle');
    const navBtn = e.target.closest('.menuslide .lp-pom-button');
    // Click on hamburger → toggle
    if (btn) {
      menu.classList.toggle('nav-toggled');
      return;
    }
    // Click on nav button inside menu → close
    if (navBtn) {
      menu.classList.remove('nav-toggled');
    }
  });
});
</script>

7. Click 'Done'

Step 5: Add the custom CSS

Next, you’ll add CSS to make the drawer slide in from the right on mobile, and control its size and animation.

1. At the bottom of the Builder, click Stylesheets.
2. Click Add New Stylesheet or open an existing custom stylesheet if you already have one.
3. Paste the following CSS:

<style>
@media only screen and (max-width: 600px) {
  .menuslide {
  --scale: 1 !important; /* default */
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 240px !important;
    height: 100vh !important;
    z-index: 9999999 !important;
    overflow: hidden !important;
    transform: translateX(100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.35s ease, opacity 0.2s ease, visibility 0s linear 0.35s !important;
  }
  
  .menu-toggle {
   width: 24px !important;
    height: 24px !important;
  }
  .menuslide.nav-toggled {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform 0.35s ease, opacity 0.2s ease, visibility 0s linear 0s !important;
  }
}
</style>

4. Save your stylesheet.

This CSS:

• Targets screens 600px wide or smaller, so the drawer only appears on mobile.
• Positions .menuslide as a fixed panel on the right, full height, starting off‑screen.
• Uses the nav-toggled class to slide the drawer in and make it visible when toggled.
• Sets a standard size for .menu-toggle buttons on mobile (you can adjust the width/height values to match your design).

Step 6: Link your navigation buttons to page sections (Recommended)

To make the menu useful, link each button in the drawer to a section on your page.unbounce+1

1. Select a section on your page you want to scroll to (for example, your “Pricing” section).
2. In the Section tab, find the ID (located under 'Metadata').
3. Copy that ID (for example, lp-pom-block-2910).
4. Select the corresponding nav button inside your drawer (e.g., “Pricing”).
5. In the Click Action settings, set the button to link to a URL of #[ID you copied].

When a visitor taps that button on mobile:

• The page will scroll to the matching section.
• The script will remove nav-toggled from .menuslide, closing the drawer.

Step 7: Preview and test on mobile

Because Unbounce uses mobile auto‑scaling, it’s important to test on real devices as well as in the Builder preview.

1. Click Preview in the Builder.
2. Resize your browser window down below 600px wide or use your browser’s mobile device simulator.
3. Confirm that:
   • The hamburger button shows on mobile.
   • Tapping the hamburger opens the drawer.
   • Tapping the close button closes the drawer.
   • Tapping any nav button both scrolls to the target section and closes the drawer.
4. Publish your page and load it on an actual phone to make sure the menu opens, closes, and scrolls as expected with your page’s auto‑scale settings.

If the drawer doesn’t appear, double‑check that:

• Your drawer element has the menuslide class.
• Your hamburger and close buttons each have the menu-toggle class.
• The JavaScript is placed Before Body End Tag and is included on the correct page.

Quick reference: required classes

Use this checklist when you’re wiring up a new template: