Sidenav Bar + Scrolling on Small Windows

[michaelportal]

I messaged you on twitter but I think this might be a better avenue (maybe?).

I am currently using and modifying your Hyde theme for Github Pages / Jekyll static sites. One problem that I keep running into is that if the window is too small the nav column on the left will not load properly: in a smaller window the menu navs will get cut off without the option to scroll down on the left (colored) column to see what is missing.

Is there any solution?

Thank you so much for a fantastic theme! - MP

Here you can see how the page is expect to show up

If someone has a smaller screen or smaller browser window then part of the text is cut off and you cant scroll. In this second image Hyde is cut off. Since I want to have my stuff pinned to the top of the column, it is usually my nav bar.

Hope that provides more context.

[ghost]

#106 and #103 cover it.

Basically: remove the sidebar-sticky class from the sidebar.

[michaelportal]

Removing sidebar-sticky does not remove the problem if the window pane is smaller than the content.

In reference to #103 I have tried the code provided but am not able to generate the right outcome.

Using the public repo from #106 I was able to locate the changes to the CSS he used to make his website scroll (visible here: http://faq.sealedabstract.com/). In my situation I had to change the min-width from "48em" to "48rem". (and of course adding overflow: scroll to the css and re-adding "sidebar-sticky" to the sidebar file). The code 106 used is here:

.sidebar { text-align: center; padding: 2rem 1rem; color: rgba(255,255,255,.5); background-color: #202020; } @media (min-width: 48rem) { .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 18rem; text-align: left; overflow: scroll; } }

Thanks for the help!!

[scottcwilson]

I have a large number of static pages that I want to show in the side nav. What I get when I use sidebar-sticky is the h1 in the sidebar getting cut off, and if I don't, the last few static pages in the nav getting cut off. Not sure how to fix this.

[muly]

I see the same issue with gophercloud website. The left sidebar menu is cut off when viewed on a low resolution monitor, and there is no way to scroll. Note: I'm not the owner of that website.

[julbinb]

What seems to have worked for me: add

height: 100%;
overflow-y: auto;

to #sidebar, .home #sidebar in the desktop view, in _layout.scss