Better alignment for current selected menu item in readthedocs theme

[styfle]

It's hard to explain why the alignment looks bad so I will show you a before and after screenshots.

Nothing selected

This looks fine and will remain the same 👍

Select a menu item

This looks wrong because the sub-menu item moved to the left after being clicked 😮

My Fix

Here we can see that the menu item is properly aligned when it is selected 🎉

[d0ugal]

This looks good, I'd like to see it have some further testing by more people and more browsers.

[styfle]

Ok thanks for the response. How can we get more people to test this?

[d0ugal]

That is one of the eternal problems with open source software :) How do you get people to dedicate the time to trying things you want to add before you do a merge or release?

I'll try and get round to this over the next week. As such I have added it to the 0.16 release that I am working towards.

[robertmclaws]

So, I just wanted to jump in with the fix I put in my stylesheets. I use category sections, and the alignment of the items would have been fine if I didn't use categories, but was not fine because I did. I don't think the styling for the TOC is granular enough to account for the additive padding. Meaning each UL in the TOC should have a padding-left value of 0.81em, instead of applying the padding on the LIs.

If you do that, each subsequently nested UL should have the right padding.

At any rate, I put this in my override CSS and it did the trick:

.wy-menu-vertical li.current > a {
    padding-left: 2.42em;
}
.wy-menu-vertical li.current > ul li a {
    padding-left: 3.23em;
}

You can see it in action at http://restier.readthedocs.io/en/latest/getting-started/.

HTH!

[styfle]

@advancedrei That works great for subnavs but the top level is misaligned.
Try adding a two .md files in the root directory: index.md and websites.md.

It will look like this:

I think what you want is:

.wy-menu-vertical .subnav li.current > a {
    padding-left: 2.42em;
}
.wy-menu-vertical .subnav li.current > ul li a {
    padding-left: 3.23em;
}

[robertmclaws]

Yep, that did the trick. I think that should be added to the stylesheet for the next release.

[styfle]

@advancedrei I changed this pull request to use that snippet.

[styfle]

Thanks! 👍