How to display child items in the Vertical Menu

By default Orchard will only include one Menu, the Horizontal Menu. However, our themes include two menus, the Horizontal Menu, which you can find on the code as MenuH, and the Vertical menu, the MenuV.

To display the child menu items from the Horizontal menu, in the Vertical Menu, when clicking on any of these items, you need to change the the script we included in your theme's Layout files to create the Vertical Menu.  

Start by opening in edit mode your theme's Layout file. Search for this script:

<div id="MenuV" class="visible-md visible-lg">
    <script type="text/javascript">$("#MenuV").html($("#MenuH nav").parent().html());</script>
</div>

Once you find the script, replace it with this:

<div id="MenuV" class="visible-md visible-lg">
    <div class="visible-md visible-lg">
    <script type="text/javascript">
        var itemSel = $("#MenuH nav li.current > ul");
        if(itemSel.children().length > 0){ $("#MenuV").html("<nav><ul class='menu'>"+itemSel.html()+"</ul><nav>"); }  
    </script>
    </div>
</div>

Now the only thing left to do is hit "Save".