Kadence - Mobile menu

In this article, we'll go over how to create a mobile menu and customize its appearance.

Create a Mobile Menu

To set a mobile menu for your site, go to Appearance > Menus. Create a new menu, add your pages, and assign it to the Mobile menu display location (as shown below).

Customize the Mobile Menu Area

Your mobile menu is located inside the Customizer under the Off Canvas area. To find this area, go to Appearance > Customize > Header. Once on the Header screen, toggle the Mobile view for the Customizer.

Once the Mobile view is toggled, you'll see an Off Canvas box appear in the Header Builder at the bottom of your screen:

This Off Canvas box is where you can find the settings that we'll discuss below. To access the settings for the entire Off Canvas area, click the Settings wheel icon next to "Off Canvas." To access the settings for the individual elements (Mobile Navigation, Social, and Button), click on the Settings wheel icon next to each element.

Off Canvas Settings

In this settings panel, you can modify the layout of the Off Canvas area. In the Design tab, you can change the background color of the pop-up and change the color of the menu toggle icon.

Mobile Navigation Settings

In this settings panel, you can set the item spacing (vertical spacing between mobile navigation links) and modify the behavior of the sub-menus. In the Design tab, you can change the colors and fonts of your mobile navigation menu.

Mobile Social Settings

In this settings panel, you can choose which icons you'd like to display and their style. In the Design tab, you can change the icon size and color of the icons.

Mobile Button Settings

In this settings panel, you can set the text and URL for your custom button. In the Design tab, you can choose the font and colors for the button.

Removing Off Canvas elements

Removing elements is easy – simply click the X icon next to an element.

Adding new Off Canvas elements

Let's say you removed the Button element and want to add it again, or perhaps you'd like to incorporate a Search icon in your mobile menu. To do that, click on the Off Canvas box (the box with the dashed lines) and a menu will pop up with additional elements that you can add to the Off Canvas area.

The HTML element is useful for displaying custom text inside your menu.

Rearranging Off Canvas elements

You can simply drag and drop elements within the Off Canvas box to rearrange them into any order you prefer.