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>


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>"); }  

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


Have more questions? Submit a request


BindTuning logo
Copyright Ⓒ 2021 Bind.
All rights reserved.
Privacy Policy
Cookie Policy
              Linkedin BindTuning Twitter BindTuning YouTube BindTuning Instagram BindTuning
Powered by Zendesk