sidebar styling issue

[chittyren]

Hello!
First off, thank you for continuing to develop this theme for mkdocs! I am running into an issue where the sidebar styling gets messy with overlapping elements. Doesn't seem to matter if using nav configuration or not in the mkdocs.yml. I've listed my mkdocs.yml file below as well as a screenshot of the issue. Noticed this happens with both the mkdocs serve & build commands.

#example mkdocs.yml
site_name: Test Docs

nav:
  - Home: 'index.md'

theme:
  name: rtd-dropdown

python: 2.7.15rc1
mkdocs: 1.0.4
mkdocs-rtd-dropdown: 1.0.2

Any thoughts or insights into what's causing this would be greatly appreciated! I'd be happy to provide any further information if needed. Thank you in advance!

[parthi2929]

I was happy discovering this theme and then got stuck by same issue. Sad it is not solved from Nov 2018, so looks like I cannot use this theme any more. :(

[ardentsword]

Unfortunately I'm having the same issue. I tested it in Chrome, Firefox and IE. Messing around with the html a bit I couldn't really fix the problem either. Somehow the
<span class="toctree-expand"></span>
Has no body anymore and the text after it collapses inside the 'plus'.

[ardentsword]

An easy (but quite ugly) fix that I'm currently going with is adding some spaces in front of the title inside toc.html:
     {{ toc_item.title }}
This offsets the title just enough to clear the icon.

[ninxsoft]

Poking around site/css/theme_extra.css I noticed that there are rules for li.toctree-l2 through to li.toctree-l6 but not for li.toctree-l1:

.wy-menu-vertical ul.tocbase li.toctree-l2 > a > span.toctree-expand {
    left: 6px;
}
.wy-menu-vertical ul.tocbase li.toctree-l3 > a > span.toctree-expand {
    left: 16px;
}
.wy-menu-vertical ul.tocbase li.toctree-l4 > a > span.toctree-expand {
    left: 26px;
}
.wy-menu-vertical ul.tocbase li.toctree-l5 > a > span.toctree-expand {
    left: 36px;
}

I was able to get around the issue by adding the following CSS to my extra stylesheet: docs/stylesheets/extra.css:

.wy-menu-vertical ul.tocbase li.toctree-l1 > a > span.toctree-expand {
  left: 6px; /* change to whatever you like */
}

Note: Ensure your mkdocs.yml file references your extra stylesheet(s):

theme:
    name: 'rtd-dropdown'
extra_css:
    - 'stylesheets/extra.css'

[rpaut]

To avoid of overlapping drop downs use .md file construction as mentioned in instructions https://github.com/cjsheets/mkdocs-rtd-dropdown. "The rules for headings are essentially"

As The dropdown menu is controlled by heading levels. your .md file construction should be for example:

# HEADER
Normal text start here.
## Subtitle 1 
Subtitle text start here.

## Subtitle 2
 .....

With correct .md file construction drop downs do not overlap.