I have an issue with a sub-menu on my template. Articles with lots of headers cause the menu to hide the headers. I’m not sure how best to explain so please see the gif below:
This is happening as your sidebar is longer than the viewport size so when the menu is getting affixed to the area on scrolling, the rest of the content (while not visible in the viewport) is being shown below it until you get far enough down.
You can do one of three things:
Remove the affix of the sidebar so it isn’t stickied. This would mean it scrolls with the rest of the page.
Adjust the size of the sidebar and text inside to fit (though you would still have this issue if you were using say an 800x600 resolution or a smaller desktop screen size.
Use an approach similar to the answer given here: https://foundation.zurb.com/forum/posts/56146-how-to-scroll-a-long-sticky-nav-sidebar essentially setting a max-height on your element to be 100% of the viewport height (max-height: 100vh) and then setting the overflow on just the vertical axis so you can scroll when there is more content (overview-y: auto). You’ll most likely have to do some extra css/coding to get it to fit your needs but it might help you.
Hope this helps get you going in the right direction for your sidebar.
