If you would like to make the Global Navigation Menu collapse into a 'hamburger' menu when viewed on smaller devices then follow these steps.  This feature will be incorporated into the product in the future, until then this is a workaround.


Desktop view:

Mobile view with hamburger menu:

Mobile view with hamburger menu expanded:

  1. Add a Nav Bar Menu Tile to the page and configure to only show on large and medium devices.
  2. Add a List Menu Tile to the same row and configure to only show on small and extra small devices.
  3. Add the code below to a Code Snippet Tile somewhere on the page and 'uncheck' Sandbox Mode.  


<script>
     
    var topNav = $('.lt-list-nav-menu')[0];
    $(topNav).closest('.lt-layout-item').css('height', '50px').children().hide();
    $(topNav).closest('.lt-layout-item').append('<div class="context-menu-mobile"></div>');
 
    var toggleMenu = function () {
        if ($(topNav).closest('.lt-tile-container').is(':visible')) {
            $(topNav).closest('.lt-layout-item').children().hide();
            $(topNav).closest('.lt-layout-item').height('50px');
            $('.context-menu-mobile').removeClass('close').show();
        } else {
            $(topNav).closest('.lt-layout-item').children().show();
            //$($('.lt-list-nav-menu > .lt-root-list')[0]).height('100%');
            var h = $($('.lt-list-nav-menu > .lt-root-list')[0]).height() + 50;
            $(topNav).closest('.lt-layout-item').height(h + "px");
            $('.context-menu-mobile').addClass('close').show();        }
    }
    $('.context-menu-mobile').click(toggleMenu);
</script>
 
<style>
     @import url("//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css");
.context-menu-mobile:after {
    color: #FFFFFF;
    content: '\f394';
    font-size: 20px;
    font-family: "Ionicons";
    padding-right: 20px;
    padding-top: 20px;
    float: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
}
.context-menu-mobile.close:after {
    content: '\f12a';
}
.lt-list-nav-menu:first-of-type {
    padding-top: 40px;
}
</style>