Since I wanted to position the Off-Canvas Toggle button next to the logo in the header bar in order to define them together as a "Sticky Header", I had to redefine the position manually. Where to find the file and what you can do with it is summarized in this article.

The Implementation

In Gantry 5, the template is distributed across many individual components, which makes the site highly modular. However, it often takes a long time to find the desired function, especially if you're a hobby programmer like me.

With my current template, I wanted to integrate the off-canvas toggle button into the header, so I had to search through several Gantry 5 components to create an override for it.

The file to be modified can be found at

 media/gantry5/engines/nucleus/templates/page.html.twig  (formerly template/common/engine/templates/page.html.twig)

Remove the following code here

Create Template Override

To ensure that changes are not overwritten during an update, the file must be placed in the template folder. This ensures that the file optimized for the template is also located with the corresponding template. Here's how to do it:

/templates/YOUR_TEMPLATE/custom/engine/page.html.twig 

This code can then be inserted wherever you want the toggle button to appear. In my case, it was in the sticky header. Simply create a custom HTML particle with this code in the Layout Manager in Gantry 5.

To make the button visible in tablet mode as well, go to the Styles settings and select Menu Settings at the very bottom to ensure the menu is always displayed, not just in mobile view.