I have a website where I am using an css bootstrap affix menu.
Due to the length of my menu, I need to add an automatic vertical scrollbar when the screen is not long enough.
I added the a class named scrollspy-y-fix
on both container ul
element and also to the container <nav class="col-sm-3">
to force a scrollbar to show up when the screen is smaller than the menu.
.scrollspy-y-fix { height: 100vh !important; overflow-y: auto !important; }
It seems to be working great in all browsers, except for when I use my MacBook Pro. On my MacBook using Safari or Google Chrome, I don't get a scroll bar. The menu is half way visible and I can't scroll down to see the item at the bottom of the menu.
Here is the site for evaluation https://crestapps.com/laravel-code-generator/docs/1.0
How can I fix this issue?
Here is a screenshot from my MacBook Pro. As you can see there is no scrollbar.
Additionally, on a regular screen PC, the selected item on the menu does not change as I am scrolling down the page. Any idea why?
Try adding "overflow: scroll;" to the css.