How to enable the toggle button on off-canvas element on reveal-for-medium of reveal-for-large to close it

How can i enable the data-toggle button, to close and reopen the off-canvas menu when i reveal the content by using the class reveal-for-medium of reveal-for-large?

This is my codeL

    <div class="off-canvas-wrapper ">
    <div class="off-canvas reveal-for-medium position-left" id="offCanvas" data-off-canvas>
        <div id="menu">

            <button class="close-button" aria-label="Close menu" type="button" data-close>
                <span aria-hidden="true">&times;</span>

            <ul class="dropdown vertical menu" data-responsive-menu="drilldown large-dropdown" data-auto-height="true" data-animate-height="true">

    <div class="off-canvas-content " data-off-canvas-content>
        <div id="container" role="main">

            <button type="button" class="button" data-toggle="offCanvas">Menu</button>  


Did you already check our docs for the toggler component?

There are also some examples with the toggle button, for example the first one:

Yes i did looked in de documentation, but the class reveal-for-large seems to disable the toggle function on large screens.

On small screens the toggle buttons works perfect! But unfortunately not on large screens.

Also because of the reveal-for-large class the close element seems also disabled by:
.position-left.reveal-for-large .close-button {

1. display: none;


My goal is to have the off-canvas default open, but still be able to toggle the off canvas menu.

reveal-for-large overwrites the display value, yes. You can overwrite it with a more strict CSS rule. Probably the element should be outside of the container with this class.

Thank you for your help