Off canvas option voor navigation element - Forum | JoomShaper
Staff replied SP Page Builder

Off canvas option voor navigation element

Asked by Bluepoint 1 year ago Last activity 1 year ago

Hello,

I use a Navigation element in the SP Builder and looking for the option to open de hamburger menu as an off canvas. How can I do this?

Regards,
Michiel

5 replies

Ziaul Kabir Staff

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,

Bluepoint Asked this

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

Ziaul Kabir Staff

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,

Bluepoint Asked this

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

Ziaul Kabir Staff

Hello Michiel,

There is no specific custom css for off canvas, If you need any customization, You can use it.

Is there anything else that I can assist?

Best Regards,

Log in to reply.