[bug]: Sidebar overlapping page content

[TylerOooli]

Steps that lead to the issue

I have been playing around learning the basics of Hugo/This theme and I am struggling to understand what piece I am missing.

Creating a very basic single page using an examplesite page as reference doesnt seem to be applying markdown for titles and the collapsible sidebar overlaps the text and does not move with the sidebar when expanding/collapsing.

Expected behavior

Text is aligned to the sidebar and moves along with it like within the example site aswell as Title markdown being applied.

Reproducer

x

Solution?

x

[TylerOooli]

Adding additional comment if helps determine if non issue or not, I built my test site on Cloudflare pages and the styling appears to be working correctly for machines other than the one I am developing in, even when navigating to the cloudflare page on the development machine still has the broken render. I'm a little stumped as to why it works on other machines but not this one. I would think if something was just straight missing from this machine the documentation pages using the theme would have this same render error.

[jgazeau]

Hi @TylerOooli ,

Regarding the sidebar, indeed, this is the intended behavior as long as your screen have a specific width.

• Below 1024 pixels, the sidebar will overlap the content and by default when you open the website it will be collapsed and only displaying icons.
• above 1024 pixels, the sidebar will not overlap the content and by default when you open the website it will uncollapsed. When collapsing the sidebar it will only display icons, but not overlap the main content. In your case I suggest you to check the window's width depending on your device.

Regarding your statement doesnt seem to be applying markdown for titles, I'm not sure to understand. Your titles are displayed correctly based on the code you have provided.

Kr,

Jordan.

[TylerOooli]

Hi @jgazeau

I coincidently reinstalled the OS on that machine for a seperate project I was working on and the issue seems to have gone away. And I havent been able to replicate the issue since.

At the time though, I do know that the screen that was exhibiting the weird behavior had a screen much larger than 1024 pixels. I know the behavior you are referring to and on every other machine that behaved as expected, even readjusting itself when zoomed in, zoomed out worked super smoothly and exactly as expected

Additionally, even when the screen is below 1024, only the uncollapsed sidebar should overlap content, but in my first screenshot the text is being overlapped by the collapsed sidebar so there was no way at all to read it collapsed or otherwise. I think maybe just something about that computer was weird. On a fresh install, changing literally nothing, it worked right away. Maybe some framework/libary/systemfile/dependency was missing/broken/etc

"doesnt seem to be applying markdown for titles"

Again, I can't replicate it so might not even matter, but I was referring to the fact that in normal pages, titles do not normally display the # next to them unless you hover the mouse over them (or tap on them on mobile) and clicking on the # is a link to that specific portion of the page. but with this broken render, the titles always displayed # and they didnt link to anything, it was all just plaintext.

We are probably good to close this issue though since it didn't stand out to you as anything specific causing the issue and might have just been a one off..

As a complete side comment, I've had a good amount of time to play with the theme more and it's super clean! It's awesome and you have my compliments! Bravo! :)

[jgazeau]

Hi @TylerOooli , Indeed I suggest to close this issue as it might be related to a problem on your machine. But feel free to reopen it if you have again a trouble and a reproducer.

Anyway thanks a lot for your comment. Greatly appreciated 😊