Mobile Menu & Off Canvas
Create a custom mobile menu and slide-in panels for your travel website so visitors on phones can find your tours and book with ease.
Overview
Use the WPTE Builder to create a custom mobile menu and slide-in panels for your site. You build the layout in Elementor. Elementor is a page builder plugin. Think of it as a drag-and-drop editor for designing your site without writing code.
This helps phone visitors move around your site without getting lost. It also gives you more room to highlight important actions like viewing tours, calling your team, or starting a booking.
Prerequisites
Before you begin, make sure these are ready in your WordPress site.
- The latest version of the Travel Monster theme is installed and activated
- The Elementor plugin is installed and activated
- The WTE Elementor plugin is installed and activated
A theme controls the overall look and layout of your WordPress site. A plugin adds extra features to WordPress.
Building a mobile menu
Build a custom mobile menu when you want more than the default phone menu. For example, you might want your logo, your main tour categories, a search box, and a booking button all in one place.
What you'll need before you start: Make sure the required theme and plugins are installed. You will do this from your WordPress dashboard. That is the main admin area you see after logging in.
The Mobile Menu Builder lets you replace the theme's default mobile menu with your own design. Once it is active, visitors on phones will see your custom layout instead of the standard one.
Create a mobile menu
This gives you a blank menu layout you can design for your business.
Go to WPTE Builder > Mobile Menu on the left sidebar of your WordPress dashboard. Click Add New. Enter a name for your mobile menu. Then click Publish.
When this is done, you will have a new mobile menu saved and ready to edit.
Edit with Elementor
This is where you shape how the menu looks on screen.
Click Edit with Elementor to open the editor. Elementor uses widgets that you drag into place. A widget is a small building block you can add to your layout.
You are now ready to add the parts of your menu.
Add the recommended widgets
These widgets help you build a menu that works well for travel visitors on mobile.
Use these widgets to create a typical mobile menu:
- Navigation Menu - shows your site menu
- Site Logo - shows your brand
- Off Canvas - adds a button that opens a slide-in panel
- Search - lets visitors search your site
A real example helps here. You might build a mobile menu for a trekking company with links to Everest Treks, Day Hikes, and Private Tours, then add Search so visitors can quickly find a specific package.
You can add other Elementor widgets too. For example, you could add social icons, a call button, an announcement about group discounts, or a message about gear rental add-ons.
Once the layout looks right, you are ready to make it live.
Apply the mobile menu
This step connects your new design to the live mobile header on your site.
- Go to Appearance > Customize > Main Header > Header Builder on the left sidebar of your WordPress dashboard
- Under Type of Header, choose Builder
- Select the mobile menu you created
Your custom header starts working as soon as Builder is selected as the layout option.
If you preview your site on a phone or narrow browser window, you should now see your custom menu.
Building an off canvas panel
Use an off canvas panel when you want extra content to slide in from the side of the screen. This works well for mobile menus, contact details, quick links, or booking actions.
An off canvas panel is a reusable slide-in panel you can open from different parts of your site. Say you want a slide-in panel on mobile that shows your contact phone and a Book This Trek button - you'd build that here.
What you'll need before you start: Make sure your theme and plugins are active. You will create the panel first. Then you will connect it to an Off Canvas widget on your page.
How it works
Off canvas panels work in two steps.
Create the panel layout
First, build the panel in the Off Canvas Builder.
Display it with the Off Canvas widget
Next, place the Off Canvas widget where you want the panel to open from.
This setup gives you flexibility. You can design the panel once and use it where you need it.
Creating an off canvas template
Create the template
This creates the slide-in panel you will design next.
Go to WPTE Builder > Off Canvas Builder on the left sidebar of your WordPress dashboard. Click Add New. Enter a template name such as Mobile Menu Panel. Then click Publish.
After publishing, the template is ready for design.
Design the panel
This is where you choose what visitors will see when the panel opens.
Click Edit with Elementor. Then add widgets such as:
- Navigation Menu
- Logo
- Social Icons
- Contact Info
For example, a day tour operator might use this panel to show a phone number, WhatsApp link, and links to popular tours. A multi-day operator might add a shortlist of top packages and a contact button.
Click Publish when you are done.
Only published templates appear in the Off Canvas widget settings. If you do not see your template later, check that it is published.
Your panel is now ready to connect to a button or icon on your site.
Configuring the Off Canvas widget
Once your template is published, add the Off Canvas widget to your mobile menu or anywhere else on your site. Then choose how the button looks and how the panel behaves.
A widget is a small building block you drag into your layout in Elementor. The Off Canvas widget is the part visitors click to open your slide-in panel.
Toggle button
These settings control how the button looks before someone opens the panel.
- Icon - choose a menu icon. The default is a hamburger icon
- Text - add an optional label next to the icon
- Icon Position - place the icon before or after the text
For example, you could use an icon with the text Menu for your main mobile navigation. You could also use text like Contact Us if the panel opens your phone number and booking help.
Panel settings
These settings control how the panel opens and which template it shows.
- Panel Side - open the panel from the left or right
- Show Overlay - show a background overlay while the panel is open
- Close on Overlay Click - let visitors close the panel by clicking the overlay
- Off Canvas Content - choose which published template appears inside the panel
This is where your template choice matters. If you built a panel with your contact phone, office hours, and a booking button for a trek, select that template here.
Close button
These settings control how visitors close the panel.
- Icon - choose a close icon. The default is an X icon
- Label - add an optional text label
Once these settings are in place, your panel should feel clear and easy to use on mobile. That is the final piece of the setup.
If you're still stuck or have a question we didn't cover, our support team is happy to help. Reach out at our support page and we'll get you sorted.