twitter bootstrap - KSS Knyle Style Sheet - Creating Sub nav for Table of Contents -

twitter bootstrap - KSS Knyle Style Sheet - Creating Sub nav for Table of Contents -

so took kss template , modified work need. have little issue. each section generating , have building table of contents me. if have section such "inputs" contain 6 variations of inputs, need able pick sub-section , create sub-section under main section in toc in side nav.

here code looks now. works when generating each section , such, cannot figure out how create sub sections under nav on left. , of course of study dont want manually code them since i'm using kss.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="index.html">overview</a></li> {{#eachroot}} <li><a href="section-{{reference}}.html">{{header}}</a></li> {{/eachroot}} </ul> </div> </div> </nav> <div class="container-fluid bs-docs-container"> <nav id="side-menu" role="navigation"> <div class="col-md-2"> <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-top toc-top-margin"> <ul class="nav nav-list affix bs-docs-sidenav"> {{#if overview}} <li><a href="index.html">overview</a></li> {{else}} {{#eachsection rootnumber}} {{#if header}} <li><a href="#bs-docs-section-{{reference}}">{{header}}</a></li> {{/if}} {{/eachsection}} {{/if}} <a class="back-to-top" href="#top">back top</a> </ul> </div> </div> </nav> <div class="col-sm-10 article-contain" data-spy="scroll" data-target="#side-menu" data-offset="0" style="height:200px; position: relative;"> <div class="kss-content markdown-body"> <article class="kss-article"> {{#if overview}} <section id="section-0" class="kss-section kss-overview"> {{html overview}} </section> {{else}} {{#eachsection rootnumber}} <section id="bs-docs-section-{{reference}}" class="col-sm-12 kss-section kss-depth-{{refdepth}}"> <h1 class="kss-title">{{header}}</h1> {{#ifany markup modifiers}} {{#if description}} <div class="kss-description"> {{html description}} </div> {{/if}} <div class="kss-modifier-block"> <div class="kss-modifier kss-modifier-original"> <div class="kss-modifier-example"> {{modifiermarkup}} </div> </div> {{#eachmodifier}} <div class="kss-modifier"> <div class="kss-modifier-head"> <div class="kss-modifier-name">{{name}}</div> <div class="kss-modifier-description"> {{html description}} </div> </div> <div class="kss-modifier-example"> {{modifiermarkup}} </div> </div> {{/eachmodifier}} <div class="kss-markup"> <pre><code data-language="html">{{markup}}</code></pre> </div> </div> {{else}} {{#if description}} <div class="kss-description"> {{html description}} </div> {{/if}} {{/ifany}} </section> {{/eachsection}} {{/if}} </article> </div> </div> </div>

here generate appropriate scss file of course. see "inputs" has many variations main "inputs" section in left hand table of contents.

so solved issue. nav should in order sections generate sub sections.

class="snippet-code-html lang-html prettyprint-override"> <div class="col-md-2 bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-top toc-top-margin"> <nav class="kss-nav" id="side-menu" role="navigation"> {{#if overview}} {{else}} <ul class="nav nav-list affix bs-docs-sidenav"> {{#eachsection rootnumber}} {{#whendepth 2}} <li class="kss-menu-item"><a href="#bs-docs-section-{{reference}}"><span class="kss-name">{{header}}</span></a></li> {{/whendepth}} <ul> {{#whendepth 3}} <li class="kss-menu-item"><a href="#bs-docs-section-{{reference}}"><span class="kss-name">{{header}}</span></a></li> {{/whendepth}} </ul> {{/eachsection}} <a class="back-to-top" href="#top">back top</a> </ul> {{/if}} </nav> </div>

twitter-bootstrap handlebars.js kss knyle-style-sheet