---
title: Set up the mobile menu
description: Build the slide-out menu shown on phones and tablets with the Off-Canvas Menu block.
url: "https://flatsome.com/docs/mobile-menu"
lastUpdated: 2026-09-30
---

On small screens the header shows a menu button that opens a slide-out panel. The button and the panel are one block: **Off-Canvas Menu**. What the panel contains is up to you.

## Add the menu button

1. Open the header in the Flatsome Builder (**Template Parts → Header**).
2. Insert an **Off-Canvas Menu** block into a Header Column, usually the left column of Header Main. The default header already has one.
3. Pick the icon and an optional label for the button.

## Fill the panel

Select the Off-Canvas Menu block and click **Show menu** at the top of its settings to open its panel on the canvas, then add blocks inside it. The usual contents are:

- **Accordion Navigation**: the menu as a vertical list where submenus expand in place.
- **Slider Navigation**: the menu as panels that slide sideways into each submenu.
- **Search Form**, **Page List**, **Language Switcher**, text, images, buttons, Gap, and Divider blocks.

Point the navigation block at the same menu the desktop Navigation uses to keep both in sync, or pick a different menu to give phones their own, shorter menu.

## Panel settings

- **Type**: slide in from the *Left* or *Right*, or open *Fullscreen*.
- **Overlay content**: background, text color, color scheme, and width of the panel.
- **Overlay backdrop**: the dimmed layer behind the panel.

## Show it only on small screens

Visibility is set per block. In the default header the Off-Canvas Menu is visible on mobile and tablet only, while the desktop Navigation, Search, and Header Divider are hidden on tablet and phone. To change when the menu button appears, select it and turn screen sizes on or off under **Responsive visibility** in the **Appearance** panel. The same setting on the Navigation block controls when the horizontal menu disappears.