Mobile Menu

Bones comes with a built-in mobile menu with it's own region. To activate the mobile menu:

  1. Add a menu button block to the page. It must have the class "menu-button" e.g.:
    <svg class="menu-button" height="28" viewbox="0 0 35 28" width="35" xmlns="http://www.w3.org/2000/svg">
        <title>menu button</title>
        <defs>
            <style type="text/css">.menu-button { position: relative; overflow: visible; }
                    .menu-button path { transition: 0.8s ease all; }
                    .menu-open .menu-button path.line-1 { transform: rotate(45deg) translate(5px, -5px); }
                    .menu-open .menu-button path.line-2 { transform: rotate(-45deg)  translate(-15px, 12px); }
                    .menu-open .menu-button path.line-3 { transform: rotate(45deg)  translate(5px, -21px); }
                    .menu-open .menu-button path.line-4 { transform: rotate(-45deg)  translate(-15px, -4px); }
            </style>
        </defs> 
        <g data-name="Layer 1" id="Layer_1"> 
            <path class="line-1" d="M33,0H2A2,2,0,0,0,2,4H33a2,2,0,0,0,0-4Z" style="fill:#00ce97"></path> 
            <path class="line-2" d="M33,8H2a2,2,0,0,0,0,4H33a2,2,0,0,0,0-4Z" style="fill:#00ce97"></path> 
            <path class="line-3" d="M33,16H2a2,2,0,0,0,0,4H33a2,2,0,0,0,0-4Z" style="fill:#00ce97"></path> 
            <path class="line-4" d="M33,24H2a2,2,0,0,0,0,4H33a2,2,0,0,0,0-4Z" style="fill:#00ce97"></path> 
        </g> 
    </svg>
  2. Add content to the Mobile Navigation region. This region will only show for mobile users when the menu button is clicked/tapped.

That's it! You can add any type of block to the mobile navigation region, and style it in anyway you choose. By default the mobile navigation region will push other content down the page, but you can set it to an overlay-style navigation by overriding the region display css.