Any interest in having different menu styling for different header levels?

[thewoolleyman]

It would be nice to distinguish header levels in the menu, at least for H1-H3, by different indentation levels or styling.

Any interest in a PR to support this?

Thanks,
-- Chad

[dsagal]

That would make a lot of sense, I'd be interested. Are you proposing a PR or requesting one? :)

[thewoolleyman]

Whoever :) I may take a shot at it if I have time.

[ColoradoKiwi]

I know this is an old post, but I found and was wanting the exact same thing - further indentation/css styling of the heading levels within a single markdown page, when its represented in the left nav bar.

I'm sure this is not the best / most extensible way to do it, but it worked for me so figured I'd post here in case anyone else's needs the same.

It took me a while to realize you can't get it done with a customization of the nav-pane.html or nav-item.html, because the child items of a page in the nav bar aren't actually being rendered in those templates, but rather are being added dynamically within the JS afterward during page load. So here's the steps I did...

1. Created a /theme_overrides directory, and declared it in the mkdocs.yml under theme: custom_dir: - refer to the standard MkDocs documentation for customizing a theme, for this bit

2. Created the child /theme_overrides/js directory and copied in the 'base.js' file (to override the shipped one) - so
   /theme_overrides/js/base.js

3. Find and modify the js function named 'renderPageToc' - replace it with the following (basically, tracking the level of the heading in the recursive addItem() function, and using it to add a CSS class to each wm-toc-li, the new class being named: hdg-level1, hdg-level2, hdg-level3, hdg-level4) - 4 lines are changed - identified below with comments.

function renderPageToc(parentElem, pageUrl, pageToc) {
  var ul = $('<ul class="wm-toctree">');
  function addItem(tocItem, level) {    // <-- added 'level' arg here
    ul.append($('<li class="wm-toc-li hdg-level' + level + '">')   // // <-- added 'hdg-leveln' class here
      .append($('<a class="wm-article-link wm-page-toc-text">')
        .attr('href', pageUrl + tocItem.url)
        .attr('data-wm-adjusted', 'done')
        .text(tocItem.title)));
    if (tocItem.children) {
      tocItem.children.forEach((item) => { addItem(item, (level +1)) });    // <-- passing in incremented level here
    }
  }
  pageToc.forEach((tocItem) => { addItem(tocItem, 1) });   // <-- passing in initial level 1 here

  $('.wm-page-toc-opener').removeClass('wm-page-toc-opener wm-page-toc-open');
  collapseAndRemove($('.wm-page-toc'));

  parentElem.addClass('wm-page-toc-opener').toggleClass('wm-page-toc-open', showPageToc);
  $('<li class="wm-page-toc wm-toc-li-nested collapse">').append(ul).insertAfter(parentElem)
    .collapse(showPageToc ? 'show' : 'hide');
}

4. Then add some custom/extra CSS as needed to style them however you like - I just did this:

/* Additional Style of inner page headings in the nav-bar */

.wm-toc-li.hdg-level2 {
    padding-left: 8px;
    font-size: 1.14rem;    
}
.wm-toc-li.hdg-level3 {
    padding-left: 16px;
    font-size: 1.14rem;    
}
.wm-toc-li.hdg-level4 {
    padding-left: 20px;
    font-size: 1.14rem;    
}
.wm-toc-li.hdg-level5 {
    padding-left: 24px;
    font-size: 1.14rem;    
}

Hope it helps someone else.

(and PS: Not sure who to thank - BUT THANKS for the Windmill Theme - exactly what I was looking for, very clean - great theme! Appreciated).