Hello Michiel,

Thank you for reaching out!

To make the hamburger menu function as an off-canvas menu, please follow these steps:

1. Navigate to System > Template Styles > Template Options.
2. Go to the Menu tab and locate the Off-canvas section, Slect Menu type Humberger.
3. In the Select Off-canvas Menu option, choose the menu you’d like to use for the off-canvas functionality. • If you don’t have a menu set up yet, you’ll need to create one first by going to Menus > Manage > Add New Menu.

Once you’ve assigned the menu, it should work as expected.

Is there anything else I can assist you with? Feel free to reach out if you have any other questions!

Best regards,

Hello Ziaul,

Thank you for your answer, but that is a nice option for the main menu. I want to have a second menu what I can build with the Navigation element in SP Builder what opens as a off canvas on mobile (see screenshots). Then I can build this navigation in a SP Builder module and assign it to the correct pages where it should be displayed. This way I can create a user menu for logged in users...

So is there an option for the Navigation element to do that (I can't find this option anywhere)

Regards, Michiel

Hello,

Unfortunately, the Navigation element in SP Page Builder doesn’t include direct settings for off-canvas functionality. However, you can achieve this by:

1. Using a Responsive Module Position: Assign your SP Builder module to a position that is configured for mobile display.
2. Adding Custom Styling: Add a custom class to the Navigation element and use CSS to off-canvas design manually.

If you implement this, ensure that your main off-canvas menu is disabled for that pages to avoid conflicts or redundancy.

Is there anything else that I can assist?

Best regards,

Hello Ziaul,

do you have any an example for this custom css?

Regards Michiel

What I mean: Do you have a custom css code (example) for the navigation menu to make this off canvas? I know how where to put the CSS in Helix end in SP Builder.

Regards, Michiel