How to Add a Mobile Hamburger Menu in the Classic Builder

A hamburger menu lets mobile visitors open a slide-out drawer of links to jump between sections of your page. You build the menu with regular Classic Builder elements, then add a few CSS classes, one JavaScript snippet, and one CSS snippet.

What the menu does

• Shows a hamburger button () on mobile that opens a drawer from the right side of the screen.
• Holds navigation buttons in the drawer that link to sections on your page.
• Closes when a visitor taps a navigation button or the close button.
• Stays hidden on desktop. You design and position it in the mobile view.

Before you start

You need the following.

• A page in the Classic Builder.
• Some familiarity with adding custom JavaScript and CSS. This article shows where each snippet goes.
• Your mobile layout set up, including the sections you want to link to, such as Features, Pricing, and Contact.

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

Build the drawer with regular elements so you can style it in the builder.

1. Open your page in the builder.
2. Switch to the Mobile view at the top center of the builder.
3. Add a new section near the top of the page and give it a name such as Menu.
4. In this section, add the following elements.
   • A hamburger button that visitors tap to open the menu.
   • A drawer, a box element that holds your navigation buttons.
   • A close button inside the drawer, for example a small X button at the top right.
5. In the drawer, add a button for each navigation link, such as Product, Pricing, and Contact. You link them to page sections in step 6.

You can style fonts, colors, and spacing in the Properties panel as usual. The custom code only controls how the drawer opens and closes.

Step 2. Add the CSS classes

Add a class to the drawer

1. Select the box element that acts as the drawer.
2. In the Properties panel, find the CSS Classes field.
3. Add the class menuslide. If the field already has classes, add it after a space and keep the existing classes.

This tells the script which element is the drawer.

Add a class to the hamburger button

1. Select the hamburger button in the mobile view.
2. In the Properties panel, find the CSS Classes field.
3. Add the class menu-toggle, after a space if the field already has classes.

Any element with the menu-toggle class opens and closes the drawer when clicked.

Add a class to the close button

The close button needs the same behavior as the hamburger button.

1. Select the close button inside the drawer.
2. In the CSS Classes field, add menu-toggle, after a space if the field already has classes.

Step 3. Check the navigation buttons

The script closes the drawer when a visitor clicks any button inside it. For this to work, the navigation items must be button elements, not text links. If you have other buttons in the drawer that shouldn't close the menu, use a different element type or place them outside the menuslide box.

Step 4. Add the JavaScript

This script moves the drawer to the end of the page body and handles opening and closing it.

1. At the bottom of the builder, click JavaScripts.
2. Click Add New JavaScript.
3. Give the script a name, such as Mobile Hamburger Menu.
4. Set Placement to Before Body End Tag.
5. Set Included on to This Page.
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 CSS

This CSS makes the drawer slide in from the right on mobile and controls its size and animation.

1. At the bottom of the builder, click Stylesheets.
2. Click Add New Stylesheet, or open an existing custom stylesheet.
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 the stylesheet.

The CSS does the following.

• Applies only to screens 600 pixels wide or narrower, so the drawer only appears on mobile.
• Positions .menuslide as a fixed, full-height panel on the right that starts off screen.
• Uses the nav-toggled class to slide the drawer in when it's opened.
• Sets a standard size for .menu-toggle buttons on mobile. Adjust the width and height to match your design.

Step 6. Link the navigation buttons to page sections

1. Select the section you want a button to scroll to, such as your Pricing section.
2. In the Section tab, find the ID under Metadata and copy it, for example lp-pom-block-2910.
3. Select the matching navigation button in the drawer.
4. In the Click Action settings, link the button to a URL of # followed by the ID you copied.

When a visitor taps the button on mobile, the page scrolls to the section and the script closes the drawer.

Step 7. Preview and test on mobile

Because mobile pages scale automatically, test on real devices as well as in Preview.

1. Click Preview in the builder.
2. Make your browser window narrower than 600 pixels, or use your browser's mobile device simulator.
3. Check that the following works.
   • The hamburger button shows on mobile.
   • Tapping the hamburger button opens the drawer.
   • Tapping the close button closes the drawer.
   • Tapping a navigation button scrolls to its section and closes the drawer.
4. Publish the page and check the menu on a phone.

If the drawer doesn't appear, check the following.

• The drawer box has the menuslide class.
• The hamburger and close buttons each have the menu-toggle class.
• The JavaScript placement is Before Body End Tag and it's included on the correct page.

Quick reference

Use this summary of the required classes when you set up a new page.

Element	Required class	Purpose
Drawer container (tray)	menuslide	Identifies the sliding menu panel
Hamburger menu button	menu-toggle	Toggles the drawer open/closed
Close button in the drawer	menu-toggle	Toggles the drawer open/closed from inside
Nav buttons in the drawer	none (buttons)	Any .lp-pom-button inside .menuslide closes it automatically